Detaillierte Erläuterung des Hinzufügens einer Ereignisantwort zu dynamisch generierten Inhalten durch jQuery. jQuery live() method

Die jQuery live()-Methode fügt allen übereinstimmenden Elementen eine Ereignisverarbeitungsfunktion hinzu. Auch wenn das Element später durch Anhängen, Voranstellen, Nachher und andere Ereignisse generiert wird, bleibt es weiterhin gültig.
Diese Methode kann als Variante der .bind()-Methode angesehen werden. Bei Verwendung von .bind() wird den vom Selektor zugeordneten Elementen ein Ereignishandler zugeordnet, später hinzugefügte Elemente jedoch nicht. Hierfür müssen Sie erneut .bind() verwenden. Zum Beispiel:

<body> 
<div class="clickme">Click here</div> 
</body>

Nach dem Login kopieren

Sie können ein einfaches Klickereignis an dieses Element binden:

Kopieren Sie den Code Der Code lautet wie folgt:

$(' .clickme').bind('click', function() { Alert(www.jb51.net); }); Wenn auf ein Element geklickt wird, wird ein Warnfeld angezeigt. Stellen Sie sich dann vor, dass danach ein weiteres Element hinzugefügt wird.

Code kopieren Der Code lautet wie folgt:$('body').append('

Ein weiteres Ziel

');

Obwohl dieses neue Element auch mit dem Selektor „.clickme“ übereinstimmt, hat das Klicken auf dieses Element keine Auswirkung, da dieses Element nach dem Aufruf von .bind() hinzugefügt wird. 

Aber live() bietet eine Methode für diese Situation. Wenn wir das Klickereignis wie folgt binden:

Kopieren Sie den Code Der Code lautet wie folgt: $('.clickme '). live('click', function() { Alert("

www.jb51.net

"); Auf diese Weise kann ein Klick auf das neu hinzugefügte Element weiterhin den Event-Handler auslösen.

Veranstaltungsdelegation
Die live()-Methode funktioniert mit einem Element, das aufgrund der Verwendung der Ereignisdelegation noch nicht zum DOM hinzugefügt wurde: An Vorfahrenelemente gebundene Ereignishandler können auf Ereignisse reagieren, die bei Nachkommen ausgelöst werden. Der an live() übergebene Event-Handler wird nicht an das Element gebunden, sondern als spezieller Event-Handler behandelt und an den Wurzelknoten des DOM-Baums gebunden.
Wenn in unserem Beispiel auf ein neues Element geklickt wird, werden die folgenden Schritte ausgeführt: 1. Generieren Sie ein Klickereignis und übergeben Sie es zur Verarbeitung an

2. Da es keine direkt an

gebundene Ereignisbehandlungsfunktion gibt, wird das Ereignis in den DOM-Baum weitergeleitet.
3. Ereignisse sprudeln weiterhin zum Wurzelknoten des DOM-Baums. Diese spezielle Ereignisverarbeitungsfunktion ist standardmäßig daran gebunden.
4. Führen Sie die spezielle Funktion zur Verarbeitung von Klickereignissen aus, die an .live() gebunden ist.
5. Diese Ereignisverarbeitungsfunktion erkennt zunächst das Ziel des Ereignisobjekts, um festzustellen, ob es fortfahren muss.
6. Dieser Test wird implementiert, indem getestet wird, ob $(event.target).closest('.clickme') passende Elemente finden kann.
7. Wenn ein passendes Element gefunden wird, wird der ursprüngliche Event-Handler aufgerufen.
8. Da der Test in Schritt 5 oben nur durchgeführt wird, wenn das Ereignis eintritt, können jederzeit hinzugefügte Elemente auf dieses Ereignis reagieren.
Das Obige ist eine detaillierte Einführung in die jQuery live()-Methode zum Hinzufügen von Ereignisantworten zu dynamisch generierten Inhalten. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.

Verwandte Etiketten：

jquery

Quelle：php.cn

Vorheriger Artikel：Jquery-Timeline-Effekte (drei verschiedene Typen)_jquery Nächster Artikel：„JavaScript Advanced Programming“ Studiennotizen Objekt- und Array-Referenztypen_Javascript-Kenntnisse

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

Neueste Artikel des Autors