jQuery löst das Problem, dass das ursprüngliche Ereignis nach dem Hinzufügen von Elementen nicht ausgeführt wird

jQuery löst das Problem, dass das ursprüngliche Ereignis nach dem Hinzufügen von Elementen nicht ausgeführt wird

Schauen wir uns zunächst meinen Fehlercode an.

html:

        <table border="1" id="best">
			<tr>
				<td>
					<button class="change">Ändern</button>
				</td>				
			</tr>
			<tr>
				<td>
					<button class="del">Löschen</button>
				</td>				
			</tr>
			<tr class="last"><td><button class="add">Hinzufügen</button></td></tr>
		</Tabelle>

javascript - Argumente:

$(".add").klick(function(){
		var newYuansu = $("<tr><td><button class='del'>Löschen</button></td></tr>");
		$(".last").vor(neuerYuansu);
})
$(".del").klick(function(){
        $(diese).parents("tr").entfernen();
})

Wenn Sie jQuery zum Hinzufügen neuer Elemente verwenden, führen die neuen Elemente einige der ursprünglichen Ereignisfunktionen nicht aus.

Der Blogger ist Student und hat nur eine Methode studiert:

$("#best").on("klicken",".del",function(){
		$(diese).parents("tr").entfernen();
})

Schreiben Sie das ursprüngliche Klickereignis so und Sie können es auf dem neu hinzugefügten Element verwenden, was sehr nützlich ist ~

Auffüllen:

1. Für JQuery-Versionen unter 1.3 (ausgenommen JQuery 1.3) ist es Zeit, Ihre JQuery-Version zu aktualisieren.

Weil es keine Lösung gibt, keine Lösung, keine Lösung, keine Lösung

2. Wenn die jQuery-Version zwischen 1.3 und 1.8 liegt, wird die Lösung für das Bindungsereignis durch die dynamisch hinzugefügten Elemente von js/jq ausgelöst (die Verwendung des On-Ereignisses wird nicht empfohlen, da das On-Ereignis unter Version 1.6 nicht unterstützt wird und ein Fehler gemeldet wird).

Binden Sie Live-Events (Live-Events werden nur in jQuery 1.9 und darunter unterstützt, nicht in höheren Versionen).

$(".del").live("click",function(){ ///jquery 1.9 (ausgenommen 1.9) und darunter können alert('Hier ist das von dynamischen Elementen hinzugefügte Ereignis');

           })

3. Empfohlen für die Anwendung auf

Wenn die jQuery-Version 1.9 oder höher ist, wird das Live-Delegate-Ereignis entfernt und durch „on“ implementiert. Lösung zum Auslösen von Bindungsereignissen für dynamisch hinzugefügte Elemente in js/jq

Hinweis: Wenn eine Seite sowohl eine niedrigere Version von jq (1.3-1.8) als auch eine höhere Version von jq (jquery1.9 oder höher) enthält, wird das Live-Delegate-Ereignis von der höheren Version entfernt. Dies führt dazu, dass die Seite einen Fehler meldet, auch wenn die jquery-Version zwischen 1.3-1.8 liegt und das Live-Ereignis verwendet wird.

Damit ist dieser Artikel über die jQuery-Methode zur Lösung des Problems, dass nach dem Hinzufügen von Elementen ursprüngliche Ereignisse nicht ausgeführt werden, abgeschlossen. Weitere jQuery-bezogene Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • jQuery-Methoden zum Hinzufügen und Entfernen von Elementen
  • JQuery fügt dynamisch Elemente und Klickereignisse hinzu, um eine Prozessanalyse zu implementieren
  • Analyse von vier Implementierungsmethoden für JQuery-Bindungsereignisse
  • jQuery-Methode zum Entfernen von Ereignissen

<<:  Textbereich Textbereich Breite und Höhe Breite und Höhe Automatische Anpassung Implementierungscode

>>:  Schritte für den Exit-Fehlercode des Docker-Containers

Artikel empfehlen

vue $set implementiert die Zuweisung von Werten zu Array-Sammlungsobjekten

Vue $set Array-Sammlungsobjektzuweisung In der be...

Vue-Beispielcode zur einfachen Implementierung von virtuellem Scrollen

Inhaltsverzeichnis Vorwort Rollprinzip erreichen ...

Zehn Erfahrungen bei der Präsentation chinesischer Webinhalte

<br /> Ich habe mich auf die drei Aspekte Te...

Velocity.js implementiert den Seiten-Scrolling-Umschalteffekt

Heute werde ich ein kleines Javascript-Animations...

JavaScript Factory Pattern erklärt

Inhaltsverzeichnis Einfache Fabrik Fabrikmethode ...

Vuex implementiert einfache Warenkorbfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Implementierungsschritte zur Installation von RocketMQ im Docker

Inhaltsverzeichnis 1. Rufen Sie das Bild ab 2. Br...

Vertieftes Verständnis davon in JavaScript

Vertieftes Verständnis davon in Js JavaScript Ber...

Installationshinweise zur komprimierten Version von MySQL 5.7.17

In diesem Artikel werden die Installationsschritt...

Detailliertes Tutorial zur schnellen Installation von Zookeeper in Docker

Docker: Zookeeper schnell installieren Ich habe Z...

CSS imitiert Fernbedienungstasten

Hinweis: Diese Demo wurde in der Miniprogrammumge...