In den letzten Jahren hat sich der Bereich der Front-End-Entwicklung rasant entwickelt und es sind nacheinander Frameworks und Bibliotheken entstanden. Unter ihnen ist jQuery immer noch eine der repräsentativsten und einflussreichsten JS-Bibliotheken. Obwohl jQuery zu einem unverzichtbaren Werkzeug in der Entwicklungswelt geworden ist, gibt es immer noch Situationen, in denen wir auf Schwierigkeiten stoßen, beispielsweise wenn die Funktion live() in jQuery nicht funktioniert. In diesem Artikel wird untersucht, warum die Funktion live() in jQuery nicht verwendet werden kann, und es werden Lösungen gegeben.
1. Die Rolle von live()
Vor jQuery 1.3 konnten wir DOM-Elemente nur durch Binden von Ereignissen bedienen, die sich auf jedes zu bedienende Element beziehen ist einmal gebunden. Wenn zu viele Elemente vorhanden sind, wird die Leistung stark beeinträchtigt. In Version 1.3 von jQuery wurde die Funktion live() eingeführt, die Ereignisse an alle Elemente binden kann, die mit dem Selektor übereinstimmen. Ereignisse können auch automatisch ausgelöst werden, wenn neu hinzugefügte Elemente mit diesem Selektor übereinstimmen, wodurch das Problem der Leistung umfangreicher Operationen gelöst wird Probleme.
2. Mängel von live()
Die Funktion live() ist zwar sehr mächtig, weist aber auch einige Mängel auf, die sie unbrauchbar machen. Wenn wir versuchen, die Funktion live() in jQuery 1.9 und späteren Versionen zu verwenden, werden wir feststellen, dass sie entfernt wurde. Die neueste Version von jQuery verfügt nicht mehr über die Funktion live(). Dies liegt daran, dass die Implementierung der Funktion live() nicht elegant genug ist. Sie verwendet einige spezielle Techniken, um die Auswirkungen von Event-Bubbling und Proxy-Ereignissen zu simulieren, was zu Konflikten mit anderen jQuery-Funktionen führt.
Zusätzlich zu der technischen Ankündigung von jQuery, dass live() ab HTML5 nicht mehr unterstützt wird, wurde die neue on()-Methode eingeführt, um bind(), live(), Delegate zu ersetzen () und andere Methoden, was dazu führt, dass in der modernen Webentwicklung die Verwendung von live() keinen Sinn mehr macht.
3. Lösung
- Verwenden Sie die Funktion „delegate()“
delegate() ist eine Funktion, die von bereitgestellt wird jQuery Eine alternative Methode zum Delegieren der Ereignisbehandlung an ein übergeordnetes Element. Verwenden Sie den Selektor, um das Element anzugeben, an das das Ereignis gebunden ist, und binden Sie das Ereignis an sein Vorgängerelement. Auf diese Weise prüft jQuery, ob das Vorgängerelement des aktuell ausgewählten Elements mit dem Selektor übereinstimmt Wenn es übereinstimmt, wird die Funktion ausgeführt. Bei dieser Methode treten keine Probleme auf, wenn Ereignisse dynamisch hinzugefügt werden, und sie wird in einer Schleife abgespielt, ähnlich wie live().
Die Verwendung ist wie folgt:
$(selector).delegate(childSelector,event,data,function)
selector: wird für Delegate verwendet Verarbeitung des übergeordneten Elements.
childSelector: Das untergeordnete Element, das verarbeitet werden muss.
Ereignis: Ereignistyp, z. B. Klick.
data: An den Event-Handler übergebene Daten.
Funktion: Rückruffunktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird.
Der Beispielcode lautet wie folgt:
$(function(){
$("body").delegate(".btn", "click", function(){
console.log("click btn!");
})Nach dem Login kopieren
})
#🎜 🎜#Verwenden Sie die Funktion on()
Die Funktion on() ist eine Ereignisverarbeitungsfunktion, die seit Version 1.9 von jQuery bereitgestellt wird. Das gebundene Ereignis kann nicht nur DOM-Ereignisse abhören, sondern auch abhören benutzerdefinierte Ereignisse. jQuery empfiehlt die Verwendung von on() anstelle der vorherigen Funktionen bind(), live() und Delegate(). on() ist die empfohlene Methode, mit der fast alle Funktionen der Funktion live() erreicht werden können.
Die Verwendungsmethode ist wie folgt:
$(selector).on(event,childSelector,data,function)
selector: Das Ereignis gebundenes Element.
Ereignis: Ereignistyp, z. B. Klick.
childSelector: Selektor für untergeordnete Elemente, der zum automatischen Binden von Ereignissen beim dynamischen Laden untergeordneter Elemente verwendet wird.
Daten: Die an den Ereignishandler übergebenen Daten können leer sein.
Funktion: Callback-Funktion wird bei Auslösung ausgeführt.
Der Beispielcode lautet wie folgt:
$(function(){
$("body").on("click", ".btn", function(){
console.log("click btn!");
})Nach dem Login kopieren
})
IV. Zusammenfassung#🎜 🎜#
Anhand der Einführung und des Beispielcodes dieses Artikels können wir sehen, dass die Funktion live() zwar nicht verwendet werden kann, wir jedoch die Funktionen Delegate() und On() verwenden können, um den gleichen Effekt zu erzielen und weiterhin jQuery verwenden. In der modernen Webentwicklung sollten wir angesichts der kontinuierlichen Weiterentwicklung von Browsern und Front-End-bezogenen Technologien versuchen, die Verwendung veralteter Methoden und Funktionen zu vermeiden und so weit wie möglich die neuesten Technologien und Methoden zu verwenden, um die Entwicklungseffizienz und Codequalität zu verbessern.
Das obige ist der detaillierte Inhalt vonLive kann nicht in JQuery verwendet werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
