Heim  >  Artikel  >  Web-Frontend  >  So lösen Sie das Problem, dass das dynamische Hinzufügen von Knoten durch jQuery Ajax keine Klickereignisse auslösen kann

So lösen Sie das Problem, dass das dynamische Hinzufügen von Knoten durch jQuery Ajax keine Klickereignisse auslösen kann

小云云
小云云Original
2018-01-10 13:43:022070Durchsuche

Beim Schreiben von Ajax zum Laden von Daten habe ich festgestellt, dass das später hinzugefügte Demo-Knotenelement das vorherige Klickereignis verloren hat. Der folgende Editor bietet Ihnen eine Lösung für das Problem, dass dynamisch hinzugefügte Knoten von jQuery keine Klickereignisse auslösen können.

Beim Schreiben von Ajax zum Laden von Daten stellte ich fest, dass das später hinzugefügte Demo-Knotenelement das vorherige Klickereignis verlor. Warum schlägt das Click-Ereignis fehl und wie sollten wir es lösen?

Tatsächlich ist es am einfachsten, onclick="" direkt in das Tag zu schreiben, aber das Schreiben auf diese Weise ist tatsächlich etwas niedrig Der beste Weg ist zu geben Der Klassenname bindet ein Klickereignis.

Zwei Lösungen für das Problem, dass durch jQuery Ajax dynamisch hinzugefügte Knoten keine Ereignisse auslösen können. Um einen besseren Demonstrationseffekt zu erzielen, gehen Sie davon aus, dass sich unter dem Hauptteil einer Seite Code mit der folgenden Struktur befindet:

 <ul id="demo">
  <li class="demo1">a1</li>
  <li class="demo1">a2</li>
  <li class="demo1">a3</li>
 </ul> 
 <script type="text/javascript">
 $("#demo").click(function(){
  $("#demo").append('<li class="demo1">aaa4</li>'); //动态像ul的末尾追加一个新元素
 });
 </script>

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.

wird wie folgt implementiert:

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

Methode 2: Verwendung von on:

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

$("#demo").on('click','.demol',function(){
 alert('OK')
});

Mit den beiden oben genannten Methoden können Sie das Problem lösen, dass jQuery Ajax dynamisch Knoten hinzufügt, die keine Klickereignisse auslösen können. Da Sie die Methode nun kennen, probieren Sie sie schnell aus.

Verwandte Empfehlungen:

JQuery simuliert Klickereignisse und löst automatisch Ereignisse aus

js simuliert Klickereignisse

Detaillierte Erläuterung häufiger Fehler beim dynamischen Hinzufügen von Klickereignissen in js

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass das dynamische Hinzufügen von Knoten durch jQuery Ajax keine Klickereignisse auslösen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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