webentwicklung-frage-antwort-db.com.de

Was ist der Unterschied zwischen jQuery .live () und .on ()

Ich sehe, dass es in jQuery 1.7 eine neue Methode .on() gibt, die die .live() in früheren Versionen ersetzt.

Ich bin daran interessiert, den Unterschied zwischen ihnen und die Vorteile dieser neuen Methode zu kennen.

84
ajbeaven

In docs ist ziemlich klar, warum Sie nicht live verwenden möchten. Wie auch von Felix erwähnt, ist .on Eine effizientere Methode zum Anhängen von Ereignissen.

Die Verwendung der Methode .live () wird nicht mehr empfohlen, da spätere Versionen von jQuery bessere Methoden bieten, die keine Nachteile haben. Insbesondere treten bei der Verwendung von .live () folgende Probleme auf:

  • jQuery versucht, die vom Selektor angegebenen Elemente abzurufen, bevor die Methode .live() aufgerufen wird. Dies kann bei großen Dokumenten zeitaufwändig sein.
  • Verkettungsmethoden werden nicht unterstützt. Zum Beispiel ist $("a").find(".offsite, .external").live( ... ); nicht gültig und funktioniert nicht wie erwartet.
  • Da alle .live() -Ereignisse am document -Element angehängt sind, nehmen Ereignisse den längsten und langsamsten möglichen Pfad, bevor sie verarbeitet werden.
  • Das Aufrufen von event.stopPropagation() im Ereignishandler hat keine Auswirkung auf das Stoppen von Ereignishandlern, die weiter unten im Dokument angefügt sind. Das Ereignis wurde bereits an document weitergegeben.
  • Die Methode .live() interagiert auf überraschende Weise mit anderen Ereignismethoden. Beispielsweise entfernt $(document).unbind("click") alle Click-Handler, die durch einen Aufruf von .live() verknüpft sind!
98
aziz punjani

Ein Unterschied, über den die Benutzer beim Übergang von .live() zu .on() stolpern, besteht darin, dass die Parameter für .on() sich geringfügig unterscheiden, wenn Ereignisse an Elemente gebunden werden, die dem DOM dynamisch hinzugefügt werden.

Hier ist ein Beispiel für die Syntax, die wir für die .live() -Methode verwendet haben:

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

Nachdem .live() in jQuery Version 1.7 nicht mehr unterstützt und in Version 1.9 entfernt wurde, sollten Sie die .on() -Methode verwenden. Hier ist ein äquivalentes Beispiel mit der .on() -Methode:

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

Bitte beachten Sie, dass wir .on() für das Dokument aufrufen und nicht für die Schaltfläche selbst . Wir geben den Selektor für das Element an, dessen Ereignisse wir im zweiten Parameter abhören.

Im obigen Beispiel rufe ich .on() für das Dokument auf. Sie erzielen jedoch eine bessere Leistung, wenn Sie ein Element verwenden, das näher an Ihrem Selektor liegt. Jedes Vorgängerelement funktioniert, solange es auf der Seite vorhanden ist, bevor Sie .on() aufrufen.

Dies wird erklärt hier in der Dokumentation aber es ist ziemlich leicht zu übersehen.

11
ajbeaven

Siehe den offiziellen Blog

[..] Die neuen APIs .on () und .off () vereinheitlichen alle Möglichkeiten zum Anhängen von Ereignissen an ein Dokument in jQuery - und sie sind kürzer für die Eingabe! [...]

4
FloydThreepwood
.live()

Diese Methode wird verwendet, um einen Ereignishandler für alle Elemente anzuhängen, die jetzt und in Zukunft mit der aktuellen Auswahl übereinstimmen.

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

und

.on()

Diese Methode wird verwendet, um eine Ereignishandlerfunktion für ein oder mehrere Ereignisse an die unten ausgewählten Elemente anzuhängen. Dies ist das Beispiel.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});

Gutes Tutorial zum Unterschied zwischen on und live

Zitat aus dem obigen Link

Was ist los mit .live ()

Die Verwendung der Methode .live () wird nicht mehr empfohlen, da spätere Versionen von jQuery bessere Methoden bieten, die keine Nachteile haben. Insbesondere treten bei der Verwendung von .live () folgende Probleme auf:

  1. jQuery versucht, die vom Selektor angegebenen Elemente abzurufen, bevor die Methode .live () aufgerufen wird, was bei großen Dokumenten u. U. zeitaufwändig ist.
  2. Verkettungsmethoden werden nicht unterstützt. Zum Beispiel $ (“a”). Find (“. Offsite, .external”). Live (…); ist ungültig und funktioniert nicht wie erwartet.
  3. Da alle .live () -Ereignisse an das document -Element angehängt sind, nehmen Ereignisse den längsten und langsamsten möglichen Pfad, bevor sie verarbeitet werden.
  4. Das Aufrufen von event.stopPropagation () in der Ereignisbehandlungsroutine ist unwirksam, wenn die Ereignisbehandlungsroutinen gestoppt werden sollen, die weiter unten im Dokument angefügt sind. Das Ereignis wurde bereits an document weitergegeben.
  5. Die .live () -Methode interagiert auf überraschende Weise mit anderen Ereignismethoden. Beispielsweise entfernt $ (document) .unbind ("click") alle durch einen Aufruf von .live ()!
1
venkat

weitere Informationen finden Sie unter .. . live () und . on ()

Die Methode .live () wird verwendet, wenn Sie sich mit der dynamischen Generierung von Inhalten befassen ... wie ich sie in einem Programm erstellt habe, das einen Tabulator hinzufügt, wenn ich den Wert eines Jquery-Schiebereglers ändere und die Schließschaltflächenfunktion an alle Tabulatoren anhängen möchte was generiert wird ... der Code, den ich ausprobiert habe, ist ..

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

und es funktioniert ziemlich viel cool ...

0
Hiren

Ich bin der Autor einer Chrome Erweiterung "Kommentar speichern" , die jQuery verwendet, und einer, die .live() verwendet. Die Funktionsweise der Erweiterung ist durch Anhängen eines Listeners an alle Textbereiche mit .live() - dies funktionierte gut, da der Listener bei jeder Änderung des Dokuments weiterhin an alle neuen Textbereiche angehängt wurde.

Ich bin zu .on() gewechselt, aber es funktioniert nicht so gut. Der Listener wird nicht angehängt, wenn sich das Dokument ändert. Daher habe ich wieder .live() verwendet. Das ist ein Fehler, den ich in .on() vermute. Sei einfach vorsichtig, denke ich.

0
PixelPerfect3