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

Ich sehe, dass es .on()in jQuery 1.7 eine neue Methode 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.

In den Dokumenten ist ziemlich klar, warum Sie Live nicht verwenden möchten. Auch wie von Felix erwähnt, .onist es eine rationalere Art, Ereignisse anzuhängen.

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

• jQuery versucht, die vom Selektor angegebenen Elemente abzurufen, bevor die .live()Methode aufgerufen wird. Dies kann bei großen Dokumenten zeitaufwändig sein.
• Verkettungsmethoden werden nicht unterstützt. Zum Beispiel $("a").find(".offsite, .external").live( ... ); ist nicht gültig und nicht wie erwartet funktionieren.
• Da alle .live()Ereignisse an das documentElement angehängt sind , nehmen Ereignisse den längsten und langsamsten Pfad, bevor sie behandelt werden.
• Das Aufrufen event.stopPropagation() des Ereignishandlers ist unwirksam, wenn Sie die unten im Dokument angehängten Ereignishandler stoppen. Das Ereignis hat sich bereits verbreitet document.
• Die .live()Methode interagiert mit anderen Ereignismethoden auf eine Weise, die überraschend sein kann, z. B. $(document).unbind("click")entfernt sie alle Klick-Handler, die durch einen Aufruf von .live()!

Ein Unterschied, über den Benutzer beim Wechsel von .live()nach stolpern , .on()besteht darin, dass sich die Parameter für .on()geringfügig unterscheiden, wenn Ereignisse an Elemente gebunden werden, die dynamisch zum DOM 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
}

Jetzt mit .live()in jQuery - Version veraltet ist 1.7 und entfernt in der Version 1.9, sollten Sie die Verwendung .on()Methode. Hier ist ein äquivalentes Beispiel mit der .on()Methode:

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

function doSomething() {
    // do something
}

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

Im obigen Beispiel rufe ich .on()das Dokument auf. Sie erhalten jedoch eine bessere Leistung, wenn Sie ein Element verwenden, das näher an Ihrer Auswahl liegt. Jedes Vorfahrenelement funktioniert, solange es auf der Seite vorhanden ist, bevor Sie es aufrufen .on().

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

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 sind kürzer zu tippen! [...]

.live()

Diese Methode wird verwendet, um einen Ereignishandler für alle Elemente anzuhängen, die jetzt und in Zukunft mit dem aktuellen Selektor ü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 aufgeführten ausgewählten Elemente anzuhängen.

$( "#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 .live () -Methode wird nicht mehr empfohlen, da spätere Versionen von jQuery bessere Methoden bieten, die keine Nachteile haben. Insbesondere bei der Verwendung von .live () treten folgende Probleme auf:

1. jQuery versucht, die vom Selektor angegebenen Elemente abzurufen, bevor die Methode .live () aufgerufen wird. Dies kann bei großen Dokumenten zeitaufwändig sein.
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 Dokumentelement angehängt sind, nehmen Ereignisse den längsten und langsamsten Pfad, bevor sie behandelt werden.
4. Das Aufrufen von event.stopPropagation () in der Ereignisbehandlungsroutine ist unwirksam, um Ereignisbehandlungsroutinen zu stoppen, die weiter unten im Dokument angehängt sind. Das Ereignis wurde bereits in das Dokument übertragen.
5. Die .live () -Methode interagiert mit anderen Ereignismethoden auf überraschende Weise, z. B. $ (document) .unbind ("click") entfernt alle Klick-Handler, die durch einen Aufruf von .live () angehängt werden!

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 eine Registerkarte hinzufügt, wenn ich den Wert eines Jquery-Schiebereglers ändere und die Funktion zum Schließen von Schaltflächen an alle Registerkarten anhängen möchte was generiert wird ... der Code, den ich versucht 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 sehr cool ...

Ich bin der Autor einer Chrome-Erweiterung "Comment Save", die jQuery verwendet, und einer, die verwendet wurde .live(). Die Erweiterung funktioniert, indem ein Listener an alle verwendeten Textbereiche angehängt wird. live()- Dies funktionierte gut, da der Listener bei jeder Änderung des Dokuments immer noch an alle neuen Textbereiche angehängt wurde.

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

Ich muss das Ereignis "Browser geschlossen" identifizieren. Nach der Recherche folge ich mit jQuery 1.8.3

1. Aktivieren Sie ein Flag mit der folgenden jQuery, wenn Sie auf den Hyperlink klicken

   $ ('a'). live ('click', function () {cleanSession = false;});

2. Aktivieren Sie ein Flag mit der folgenden jQuery, wenn Sie auf einen beliebigen Typ der Eingabeschaltfläche klicken

$ ("input [type = submit]"). live ('click', function () {alert ('input button clicked'); cleanSession = false;});

1. Aktivieren Sie ein Flag mit der folgenden jQuery, wenn ein Formular gesendet wird

$ ('form'). live ('submit', function () {cleanSession = false;});

Jetzt wichtig ... meine Lösung funktioniert nur, wenn ich stattdessen .live .on verwende. Wenn ich .on verwende, wird das Ereignis ausgelöst, nachdem das Formular gesendet wurde und was zu spät ist. Oft werden meine Formulare mit einem Javascript-Aufruf (document.form.submit) gesendet.

Es gibt also einen entscheidenden Unterschied zwischen .live und .on. Wenn Sie .live verwenden, werden Ihre Ereignisse sofort ausgelöst, aber wenn Sie zu .on wechseln, wird es nicht rechtzeitig ausgelöst