L'événement Click ne fonctionne pas après la pagination ajax

Question

J'espère vraiment que quelqu'un pourra résoudre ce problème. J'ai un script de pagination ajax qui fonctionne bien sur la première page, mais les événements de clic ne fonctionneront pas sur les autres pages de la pagination.

Voilà comment je l'ai configuration:

scripts jQuery

<script type="text/javascript"> 
// prepare when the DOM is ready 
$().ready(function() { 
//popup div 
$(".wsbutton_pop").click(function(e){ 
//getting height and width of the message box 

     var height = $('#popuup_div').height(); 
     var width = $('#popuup_div').width(); 
     //calculating offset for displaying popup message 
     leftVal=e.pageX-(width/2)+"px"; 
     topVal=e.pageY-(height/2)+"px"; 
     //show the popup message and hide with fading effect 
     $('#popuup_div').css({left:leftVal,top:topVal}).show(); 
     $('#popuup_div').html("<img src='images/ajaximg.gif' border='0'>"); 

     $.ajax({ 
      type: "get", 
      url: $(this).attr("href"), 
      success: function(r){ 
      $('#popuup_div').html("") 
      $('#popuup_div').prepend(r); 
      } 
    }); 

    }); 

//close div on mouse click 

$(".popup_msg").click(function(e){ 
     $('#popuup_div').fadeOut(); 
    }); 

}); 
</script> 

Cela devrait apparaitre un div avec le contenu d'une autre page.

Maintenant, mon lien: <a href="http://mysite.com/file.php?content=1" class="wsbutton_pop">Load content</a>

Cela fonctionne très bien sur la première page, mais le problème est maintenant quand je clique pour visiter la page 2 qui a le même lien exact, le lien ne fonctionne plus.

En note, mes pages devraient charger dans un div avec id = "paging". La pagination ajax elle-même fonctionne très bien, c'est juste que tout événement jquery click sur les pages résultantes ne fonctionne pas. Je pense que le problème peut être que j'ai besoin de relier le script mais je ne sais pas comment y parvenir.

Merci pour toute aide à ce sujet.

Answer 1

Je suppose que vous êtes en train d'écraser le lien avec la pagination afin que l'événement click ne soit plus lié. Si vous utilisez jquery 1.3, vous pouvez utiliser le live events pour résoudre ce problème.

$(".wsbutton_pop").live("click", function(e) { ... 

Ou si vous utilisez une version antérieure de jQuery vous pouvez juste refixer le gestionnaire d'événements lorsque vous obtenez les nouvelles données de page en arrière.

Answer 2

Par votre description, il semble que vous générez une nouvelle page avec un .wsbutton_pop dedans. Si c'est le cas, vous devrez y attacher votre fonction onclick. Votre script initial est seulement exécuté au premier chargement, donc l'enregistrement est seulement pour les .wsbutton_pop qui existent à ce moment-là.

Answer 3

Vous avez raison de relier le script. La raison en est que les éléments de la page sont recréés lors de la publication ajax.

Si vous utilisez jQuery 1.3 ou plus, vous pouvez utiliser des événements en direct (pour un clic) comme ceci:

$(".wsbutton_pop").live("click", function(e){ 
    ... 
}); 

Notez que vivent les événements ne fonctionnent pas avec les événements suivants: le changement, le flou, mise au point, mouseenter , mouseleave, et soumettre.

Si vous ne l'utilisez jQuery 1.3, ou vous devez utiliser l'un des événements ci-dessus, vous devez suivre les conseils donnés dans l'article ci-dessous pour éviter les fuites de mémoire: Code-Project Article

Answer 4

Vous liez que l'initiale. wsbutton_pop éléments. Si ceux-ci sont supprimés et que de nouveaux éléments de la classe .wsbutton_pop sont ajoutés, ils ne recevront pas automatiquement le gestionnaire d'événements click que vous avez connecté en même temps.

Qu'est-ce que vous cherchez est

$(".wsbutton_pop").live("click", function(e) {...}); 

qui s'appliquera à toutes les instances de .wsbutton_pop actuellement à la page, et tout qui se créé.

- = - = - = - = - = - = - = - = - = -

Les autres réponses sont venus comme je l'ai écrit, je dirais que si nous obtenons un mashup du poste de Brian Fisher et Jimmie R. Houts's nous aurions la meilleure réponse, et en mentionnant probablement que seuls les éléments qui sont actuellement dans DOM reçoivent le gestionnaire d'évènement en utilisant $ (..) click (...)