Heim > Web-Frontend > js-Tutorial > Zwei Methoden zur Lösung des Problems, dass dynamisch hinzugefügte Elementknoten keine Ereignisse in jquery_jquery auslösen können

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

WBOY
Freigeben: 2016-05-16 15:34:27
Original
1349 Leute haben es durchsucht

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>
Nach dem Login kopieren

Methode 1: Live verwenden

Die Funktion

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');
});
Nach dem Login kopieren

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')
});
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage