jQuery load question

Question

J'utilise jquery load pour faire défiler les pages d'un calendrier sur ma page. J'utilise cette fonction

$(document).ready(function(){ 
    $('a.cal').bind('click', function(e) {   
     var url = $(this).attr('href'); 
     $('div#calender').load(url); 
     e.preventDefault(); 
    }); 
}); 

pour affecter le comportement des ancres avec la classe « cal » qui charge essentiellement la page suivante et précédente de la calandre dans le récipient de la calandre, #calender.

Problème est le comportement ne fonctionne qu'une fois. Le div rafraîchit avec le nouveau contenu bien la première fois, mais les clics suivants sur les boutons suivant/précédent le font charger une nouvelle page.

Quelqu'un peut-il m'aider s'il vous plaît? Je suppose que le code ci-dessus assigne le comportement aux ancres avec la classe «cal» sur le premier chargement, mais en cliquant sur le bouton suivant/prev actualise le calendrier dans la div, et ces boutons nav n'ont pas le comportement ajax.

Comment puis-je résoudre ce problème si ... J'apprécierais vraiment votre aimable aide.

Merci.

Answer 1

vous pouvez essayer d'utiliser live("click"... au lieu de bind("click"...

live() utilise la délégation de l'événement alors que bind() attache directement à l'élément, par conséquent, lorsque vous créez de nouveaux éléments qui n'existaient pas au moment d'attacher le gestionnaire d'événements, ils n'obtiennent pas le gestionnaire d'événements.

Answer 2

Utilisez live pour faire en sorte que le gestionnaire est lié à tous les éléments futurs actuels et:

$('a.cal').live('click', function(e) {   
     var url = $(this).attr('href'); 
     $('div#calender').load(url); 
     e.preventDefault(); 
    }); 

Answer 3

Plutôt que d'utiliser de liaison en direct

$('a.cal').live('click', function(e) { 
    // your same click handling 
}); 

De la documentation http://docs.jquery.com/Events/live#typefn

Associe un gestionnaire à un événement (comme un clic) pour tout le courant - élément adapté

- et futur

Ce qui signifie que chaque fois que de nouveaux éléments sont ajoutés avec la classe cal, ils sont liés à votre gestionnaire d'événements automatiquement