Detaillierte Erläuterung der Verwendung von .die() und .live() in jQuery

Viele Entwickler kennen die .live()-Methode von jQuery. Die meisten von ihnen wissen, was diese Funktion macht, aber sie wissen nicht, wie man sie implementiert, daher ist die Verwendung nicht so komfortabel. Und sie haben noch nie von der .die()-Methode zum Aufheben der Bindung des .live()Ereignisses gehört. Auch wenn Sie damit vertraut sind, kennen Sie .die()?

Was ist .live()
Die .live-Methode ähnelt .bind(), außer dass Sie damit Ereignisse an DOM-Elemente binden können auf Elemente, die noch nicht im DOM vorhanden sind. Schauen Sie sich das folgende Beispiel an:

Nehmen wir an, ein Benutzer klickt auf einen Link und Sie möchten benachrichtigt werden, dass er die Website verlässt.

$(
document
).ready( function() { 
$('a').click( function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

Beachten Sie, dass .click() nur eine einfache Methode zur Implementierung des allgemeineren .bind() ist. Der folgende und obige Code entspricht der obigen Implementierung.

$(document).ready( function() { 
$('a').bind( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

Aber jetzt fügen Sie über Javascript einen Link zur Seite hinzu.

$(&#39;body&#39;).append(&#39;<p><a href="...">Check it out!</a></p>&#39;);

Wenn der Benutzer jedoch auf den Link klickt, wird die Methode nicht aufgerufen, da der Link nicht vorhanden ist, wenn Sie das Klickereignis an alle -Knoten binden Ersetzen Sie .bind() durch .live():

$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

Wenn Sie nun einen neuen Link zur Seite hinzufügen, funktioniert die Bindung.

.live() Wie es funktioniert Die Magie hinter
.live() besteht darin, dass es das Ereignis nicht an die von Ihnen ausgewählten Elemente bindet, sondern tatsächlich an den DOM-Baum mit dem Knoten (. $(document) im Beispiel), wird es wie ein Parameter im Element übergeben.

Wenn Sie dann auf ein Element klicken, wird das Klickereignis im DOM-Baum nach oben weitergeleitet, bis es den Wurzelknoten erreicht. Der Auslöser dieses .click()-Ereignisses wurde von .live() auf dem Root-Knoten erstellt. Diese Triggermethode prüft zunächst, ob das angeklickte Ziel mit dem von .live() aufgerufenen Selektor übereinstimmt. Im obigen Beispiel wird also geprüft, ob das angeklickte Element mit $('a') in $('a').live() übereinstimmt. Wenn es übereinstimmt, wird die Bindungsmethode ausgeführt.

Denn egal, was Sie im Wurzelknoten anklicken, das .click()-Ereignis des Wurzelknotens wird ausgelöst, und diese Prüfung wird durchgeführt, wenn Sie auf ein beliebiges Element klicken, das dem Wurzelknoten hinzugefügt wurde.

Alle .live() können .die() sein
Wenn Sie .bind() kennen, dann kennen Sie definitiv .unbind(). Dann haben .die() und .live() eine ähnliche Beziehung. Um auf die obige Bindung zuzugreifen (ich möchte nicht, dass das Dialogfeld angezeigt wird, wenn der Benutzer auf den Link klickt), gehen wir wie folgt vor:

$('a').die();

Genauer gesagt, wenn es andere Ereignisse gibt, die gebunden sind und müssen beibehalten werden, z. B. Hover Oder andere, Sie können nur die Bindung des Klickereignisses aufheben.

$('a').die('click');

Um genauer zu sein: Wenn der Methodenname definiert wurde, können Sie die Bindung der angegebenen Methode aufheben.

specialAlert = function() { 
alert("You are now leaving this site"); 
return true; 
} 
$(document).ready( function() { 
$('a').live( 'click', specialAlert ); 
$('a').live( 'click', someOtherFunction ); 
}); 
// then somewhere else, we could unbind only the first binding 
$('a').die( 'click', specialAlert );

Fragen zu .die()
Bei der Verwendung dieser Funktionen hat die Methode .die() einen Nachteil. Sie können nur den -Elementselektor verwenden, der in der .live()-Methode verwendet wird. Sie können ihn beispielsweise nicht so schreiben:

$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
}); 
// it would be nice if we could then choose specific elements 
// to unbind, but this will do nothing 
$('a.no-alert').die();

.die()-Ereignis sieht aus Es scheint, dass die Zieloption übereinstimmt und die Bindung von .live() freigegeben wird, aber tatsächlich hat $('a.no-alert') keine Bindung, sodass jquery keine Bindung zum Entfernen finden kann. also wird es nicht mehr funktionieren.
Noch schlimmer ist dieses:

$(document).ready( function() { 
$('a,form').live( 'click', function() { 
alert("You are going to a different page"); 
return true; 
}); 
}); 
// NEITHER of these will work 
$('a').die(); 
$('form').die(); 
// ONLY this will work 
$('a,form').die();

Wie man .die() repariert

In meinem nächsten Artikel werde ich es tun Schlagen Sie eine neue Art der Implementierung von .die() vor, die ein abwärtskompatibles Verhalten bietet. Wenn ich Zeit habe, schlage ich vielleicht vor, dass das jQuery-Kernentwicklungsteam meine Vorschläge annimmt und in der nächsten Version Änderungen vornimmt. Ich hoffe, mehr der Methoden zu haben, die ich gerade geschrieben habe, einschließlich optionaler Kontextparameter, die das Anhängen benutzerdefinierter Knoten ermöglichen Ereignisse und nicht der Wurzelknoten.

Wenn Sie weitere Informationen und Beispiele wünschen, können Sie sich die Dokumentation von jQuery .live() und .die() ansehen.

Achten Sie auch auf .delegate() und .undelegate(). Sie können .live() und .die() ersetzen und sind eng miteinander verbunden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von .die() und .live() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!