Heim > Web-Frontend > js-Tutorial > Hauptteil

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

小云云
Freigeben: 2018-01-10 13:43:02
Original
2040 Leute haben es durchsucht

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

wird wie folgt implementiert:

$('.demo1').live('click', function(){
 alert('OK');
});
Nach dem Login kopieren

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

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!

Verwandte Etiketten:
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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!