Click Ereignis funktioniert nicht nach Ajax Paging

Question

Ich hoffe wirklich, dass jemand mit diesem Problem helfen kann. Ich habe ein Ajax-Paginierungsskript, das auf der ersten Seite funktioniert, aber die Klickereignisse funktionieren nicht auf anderen Seiten des Paging. Diese

ist, wie ich es Setup:

jQuery Skript

<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> 

dass ein div mit Inhalt von einer anderen Seite Popup sollte.

Jetzt ist mein Link: <a href="http://mysite.com/file.php?content=1" class="wsbutton_pop">Load content</a>

Das auf der Startseite funktioniert gut, aber das Problem ist jetzt, wenn ich Besuch klicken Sie auf Seite 2, die genau die gleiche Verbindung hat, wird der Link nicht mehr.

Als eine Anmerkung, sollten meine Seiten in ein div mit ID = "Paging" laden. Der Ajax-Paging selbst funktioniert großartig, nur dass jedes jquery click -Ereignis auf den resultierenden Seiten nicht funktioniert. Ich denke, das Problem könnte sein, dass ich das Skript neu binden muss, aber ich weiß nicht, wie ich das erreichen soll.

Danke für jede Hilfe zu diesem Thema.

Answer 1

Ich würde vermuten, dass Sie den Link mit der Seitennummerierung überschreiben, so dass das Klickereignis nicht mehr gebunden ist. Wenn Sie jQuery 1.3 verwenden, können Sie die live events verwenden, um dies zu beheben.

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

Oder wenn Sie eine frühere Version von jQuery verwenden können Sie nur den Event-Handler wieder anbringen, wenn Sie die neue Seitendaten zurück.

Answer 2

Mit Ihrer Beschreibung klingt es wie Sie eine neue Seite mit einem .wsbutton_pop darin erzeugen. Wenn das der Fall ist, müssen Sie Ihre Onclick-Funktion anhängen. Ihr initiales Skript wird nur beim ersten Laden ausgeführt, sodass die Registrierung nur für die zu diesem Zeitpunkt vorhandenen .wsbutton_pops gilt.

Answer 3

Sie haben Recht, das Skript erneut zu binden. Der Grund dafür ist, dass die Elemente auf der Seite während des Ajax-Postbacks neu erstellt werden.

Wenn Sie mit jQuery 1.3 oder höher können Sie Live-Events nutzen (Klick) wie folgt aus:

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

Beachten Sie, dass Ereignisse Leben nicht mit den folgenden Ereignissen arbeiten: Veränderung, Unschärfe, Fokus, MouseEnter- , mouseleave und submit.

Wenn Sie nicht jQuery 1.3 verwenden, oder Sie müssen über eines der Ereignisse verwenden, sollten Sie den Rat in dem folgenden Artikel folgen, um Speicherlecks zu vermeiden: Code-Project Article

Answer 4

Sie sind nur die erste Bindung. wsbutton_pop Elemente. Wenn diese entfernt werden und neue Elemente der Klasse .wsbutton_pop hinzugefügt werden, erhalten sie nicht automatisch den Click-Ereignishandler, den Sie einmal verdrahtet haben.

Was Sie suchen ist

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

, die für alle Instanzen von .wsbutton_pop befinden sich auf Seite gelten, und alle, die erstellt bekommen.

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

Die anderen Antworten kamen in als ich dies schrieb, würde ich sagen, wenn wir ein Mashup von Brian Fisher Post bekommen und Jimmie R. Houts haben wir die beste Antwort, und wahrscheinlich erwähnen, dass nur die Elemente, die derzeit in DOM sind, den Event-Handler bei der Verwendung von $ (..). klicken (...)