webentwicklung-frage-antwort-db.com.de

jQuery on () -Methode für mehrere Selektoren

Seit Version 1.7 ist live veraltet.

Das folgende Beispiel lässt sich einfach mit der neuen on -Methode kompatibel machen:

$('nav li, #sb-nav li, #help li').live('click', function () {
    // code...
});

Mit on:

$('nav, #sb-nav, #help').on('click', 'li', function () {
    // code...
});

mschreiben des folgenden Beispiels mit on?

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
     // code...
 });
46
$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
     // code...
 });

.live() bindet das Dokument nur als Listener.

Meine zwei Cent sind, dass Sie fast immer einen besseren Zuhörer als document finden können. Zumindest verwenden fast alle Seiten einen Wrapper für den Hauptinhalt. Dadurch werden Knoten in der Kopfzeile, Fußzeile und manchmal in der Seitenleiste als Listener entfernt.

Die beste Möglichkeit, .on Als Delegierungsfunktion zu verwenden, besteht darin, den nächsten gemeinsamen Vorfahren zu identifizieren, von dem erwartet wird, dass er niemals zerstört wird oder Ereignisse auf andere Weise ungebunden sind. Wenn Sie beispielsweise ein Formular haben, das durch Ajax-Anforderungen aktualisiert und geändert wird, kann der Listener der Formularknoten selbst (wenn nur der Inhalt des Formulars aktualisiert wird) oder ein Containerelement (im Allgemeinen ein div) sein, das das Formular umgibt. Wenn solch ein Div nicht da ist, kannst du es jederzeit hinzufügen oder einfach den Baum zum nächsten Vorfahren hinaufsteigen.

[bearbeitet, um hinzuzufügen:]

In dem angegebenen Beispielcode ist es schwer zu sagen, ob es einen besseren Listener gibt, der sowohl #header Als auch #sb-sec Enthält. Wenn Sie sich jedoch vorstellen, dass diese Dinge einen gemeinsamen Vorfahren mit der ID "mainContainer" haben, wird der Listener durch Ihren effizienteren Code einfach ausgetauscht:

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
   // code...
});
78
Greg Pettit

Wenn Sie versuchen, .on() zu verwenden, um Ereignisse im DOM-Objekt abzuhören, die möglicherweise nach dem ersten Aufruf von .on() erstellt wurden, ist dies die effizienteste Methode besteht darin, ein vorhandenes übergeordnetes Objekt zu finden, das nicht kommen und gehen kann, und Sie können Ereignis-Listener jetzt daran binden.

.live() setzt alle Listener auf das Dokumentobjekt (das übergeordnete Hauptobjekt) und kann bei vielen Listenern ziemlich ineffizient werden.

Mit .on() können Sie angeben, welches übergeordnete Objekt am effizientesten ist. Wenn Sie also alle diese Ereignishandler in eine Anweisung einfügen möchten und diese '#header .fixed-feedback-bn, #sb-sec .feedback-bn' keine gemeinsamen übergeordneten Elemente haben, müssen Sie angeben Dokument wie dieses Elternteil wie Greg geschrieben hat.

Ein effizienterer Weg, dies zu tun, wäre jedoch, dies nach Bedarf aufzuteilen. Binden Sie für die Elemente, die keinen dynamischen Bedarf haben, einfach direkt an dieses Element. Wenn zum Beispiel #header und #sb-sec nicht kommen/gehen und kein dynamisches Verhalten benötigen, können Sie es direkt folgendermaßen finden:

$('#header, #sb-sec').on('click', function() {
    // code here
});

Wählen Sie für Elemente, die ein dynamisches Verhalten erfordern, ein geeignetes gemeinsames übergeordnetes Element aus und verknüpfen Sie dieses mit dem gemeinsamen übergeordneten Element als Auffangpunkt für die Ereignisse und dem Selektor als Filter für die Unterelemente, für die das Ereignis ausgelöst werden soll zum:

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
    // code here
});
5
jfriend00