Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Lösung des Problems des Ersetzens der Live-Methode durch die On-Methode in jquery

Detaillierte Erläuterung der Lösung des Problems des Ersetzens der Live-Methode durch die On-Methode in jquery

黄舟
Freigeben: 2017-06-26 09:35:21
Original
1385 Leute haben es durchsucht

Die Elemente, die ich in Zukunft hinzufügen werde, werden mit Ajax gespleißt
Mein On ist so geschrieben

$("td").on("click","a",function(){
alert("Aha!");
});
Nach dem Login kopieren

Dies ist das Tag der Seite

<td><a class="topic_a" href="#creat"  name=&#39;${data.context }&#39;>选择</a></td>
Nach dem Login kopieren

Ajax-Splicing-Tag ist genau das gleiche wie das obige Tag.

Aber ein Klick auf mein gespleißtes Tag hat keine Wirkung.
Warum?

Bitte stellen Sie sicher, dass, wenn Sie on zum Binden verwenden, td bereits im Dom vorhanden ist.
Außerdem...warum Live sein kann, weil Live jederzeit an das Dokument gebunden ist Dokumentalles existiert..
Das von Ihnen verwendete Ereignis ist an td gebunden. Wenn td nicht existiert, wird es definitiv nicht gebunden

Bitte lernen Weitere Informationen zum Ereignisdelegierungsmechanismus.

Ersetzen Sie ihn durch „delegate“

Werden die in Zukunft hinzugefügten Elemente enthalten?
Wenn enthalten ist, kann der Ereignis-Proxy nicht an $("td") gebunden werden.
Der Ereignis-Proxy sollte an ein übergeordnetes Element gebunden werden
Zum Beispiel

oder das übergeordnete Element von
kann auch
durchgeführt werden, z. B.

$("body").on("click","a",function(){
alert("Aha!");
});
Nach dem Login kopieren
Beim Binden verwenden.

Fügen Sie es zuerst zusammen, fügen Sie es dann der Seite hinzu und binden Sie dann das Ereignis.
In js wird es auch Zeile für Zeile gelesen.

Das Bindungsereignis wird vorne geschrieben, und das später hinzugefügte td wird dieses Ereignis natürlich nicht haben.
Stellen Sie außerdem sicher, dass td auf die Seite geschrieben wurde.

Die Live-Methode ist nur in der alten Version von

jquery verfügbar. Die On-Methode kann nur vorhandene Tags auf der Seite verwenden. Wenn Sie zukünftige Elemente abrufen möchten, können Sie dies tun Verwenden Sie nur die Delegate-Methode. Die spezifische Schreibmethode lautet wie folgt:

//div是页面已经有的元素,button是js生成的未来元素!
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});
Nach dem Login kopieren
 $(document).on(&#39;click&#39;, &#39;td a&#39;, function() {
    alert("Aha!");
  });
Nach dem Login kopieren
 $("body").delegate("td","click",function(){
    alert("ok!");
  });
Nach dem Login kopieren
Bitte stellen Sie sicher, dass td bereits im Dom vorhanden ist, wenn Sie es mit on binden.

Außerdem ... warum Live verwendet werden kann, weil Live an das Dokument gebunden ist. Das Dokument existiert jederzeit.
Wenn Sie on verwenden, ist Ihr Ereignis an das TD gebunden. Wenn das TD dies tut nicht existiert, wird es definitiv nicht gebunden.

Bitte erfahren Sie mehr über den Ereignis-Proxy-Mechanismus.

Schreiben Sie es so


$("body").on("click","td a.topic_a",function(){
alert("Aha!");
});
Nach dem Login kopieren
Werden die Elemente Zukünftig hinzugefügt:
?

Wenn

enthalten ist, kann der Ereignis-Proxy nicht an $("td") gebunden werden.
Der Ereignis-Proxy sollte an ein übergeordnetes Element gebunden werden
Zum Beispiel oder das übergeordnete Element von
Textkörper oder Dokument
wie


Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Lösung des Problems des Ersetzens der Live-Methode durch die On-Methode in jquery. 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