Zwei Methoden zur Lösung des Problems, dass dynamisch hinzugefügte Elementknoten keine Ereignisse in jquery_jquery auslösen können

Wenn Sie beispielsweise einen Ajax zum Lesen der Nachrichtenliste erstellen, gibt es hinter jeder Nachricht eine Antwortschaltfläche mit der Klasse „reply“. Wenn Sie $(".reply").click(function(){ // verwenden etwas tun... }), vermutlich ist das Klickereignis der Antwortschaltfläche in der später über Ajax geladenen Liste ungültig.

EigentlichDer einfachste Weg besteht darin, onclick="" direkt in das Tag zu schreiben, aber der beste Weg ist, es an das zu binden Klassenname Legen Sie ein Klickereignis fest.

Es gibt zwei Lösungen für das Problem, dass dynamisch hinzugefügte Elementknoten in jquery keine Ereignisse auslösen können , wie folgt:

Um einen besseren Demonstrationseffekt zu erzielen, gehen Sie davon aus, dass sich unter dem Hauptteil einer Seite Code mit der folgenden Struktur befindet:

<p id="pLabel">新加一条</p>
<ul id="ulLabel">
 <li class="liLabel">aaa1</li>
 <li class="liLabel">aaa2</li>
 <li class="liLabel">aaa3</li>
</ul>
<script type="text/javascript">
$("#pLabel").click(function(){
 $("#ulLabel").append('<li class="liLabel">aaaQ</li>'); //动态像ul的末尾追加一个新元素
});
</script>

Methode 1: Live verwenden

live() bindet einen oder mehrere Event-Handler an das ausgewählte Element und gibt die Funktionen an, die ausgeführt werden sollen, wenn diese Ereignisse auftreten. Die Funktion live() wird auf aktuelle und zukünftige Elemente angewendet, die dem Selektor entsprechen. Zum Beispiel Elemente, die dynamisch durch Skripte erstellt werden.

Die Implementierung ist wie folgt:

$('.liLabel').live('click', function(){
 alert('OK');
});

Methode 2: Anwendung auf

Sie können Ereignisse über die on-Methode binden, die an ihr übergeordnetes Element oder ihren Hauptteil gebunden werden kann. Die Implementierung ist wie folgt:

$("#ulLabel").on('click','.liLabel',function(){
 alert('OK')
});
或者：
$("body").on('click','.liLabel',function(){
 alert('OK')
});

Jetzt können Sie ausprobieren, ob das Problem gelöst wurde. Ich hoffe, dieser Artikel kann Ihnen wirklich helfen.