Einführung in die Verwendung von jQuerys .live() und .die()

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.

Der Code lautet wie folgt:

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

Beachten Sie, dass .click() nur eine einfache Methode zum Implementieren des allgemeineren .bind() ist und die oben genannten Codes sind eine äquivalente Implementierung der oben genannten.

Der Code lautet wie folgt:

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

Fügen Sie nun aber über Javascript einen Link zur Seite hinzu.

Der Code lautet wie folgt:

$('body').append('e388a4556c0f65e1904146cc1a846beed632822ac9277025ec149ceea8685596Schauen Sie sich das an !16ef26f8b7ea0fc89bdf90e275a93e5d94b3e26ee717c64999d7867364b1b4a3');

Wenn der Benutzer jedoch auf diesen Link klickt, wird die Methode nicht aufgerufen, da dieser Link beim Binden des Klickereignisses an alle3499910bf9dac5ae3c52d5ede7383485 Der Knoten existiert noch nicht, daher ersetzen wir .bind() durch .live():

Der Code lautet wie folgt:

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

Wenn Sie nun einen neuen hinzufügen Link Sobald Sie auf der Seite sind, kann die Bindung ausgeführt werden.

.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:

Der Code lautet wie folgt:

$('a').die() ;

Genauer gesagt: Wenn andere Ereignisse gebunden sind und beibehalten werden müssen, z. B. Hover oder andere, können Sie nur die Bindung des Klickereignisses aufheben .

Der Code lautet wie folgt:

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

Seien Sie genauer, wenn der Methodenname vorhanden ist definiert wurde, können Sie die Bindung der angegebenen Methode aufheben.

Der Code lautet wie folgt:

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:

Der Code lautet wie folgt:

$(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 scheint mit der Zieloption übereinzustimmen und die Bindung von .live() aufzuheben, aber tatsächlich hat $('a.no-alert') keine Bindung, also jquery Ich kann keine Bindung zum Entfernen finden und es wird nicht funktionieren.
Was noch schlimmer ist, ist das Folgende:

Der Code lautet wie folgt:

$(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();

So beheben Sie .die()

In meinem nächsten Artikel werde ich eine neue Art der Ausführung von .die() vorschlagen, die ein abwärtskompatibles Verhalten bieten kann. 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 vonEinführung in die Verwendung von jQuerys .live() und .die(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!