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

85

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.

ajbeaven
quelle

Antworten:

99

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()!
Aziz Punjani
quelle
8
Ich frage mich nur, ob dies der Punkt ist, warum sie die Live-Methode nicht verbessert haben, anstatt eine neue On-Methode zu erstellen. Es sei denn, es gibt etwas, was live tun kann, aber nicht weiter?
Neobie
1
@neobie, es ist, um Ihren Code aussagekräftiger zu machen und Einheitlichkeit zu haben
Om Shankar
@neobie: Ich stelle mir vor, es geht darum, die Abwärtskompatibilität aufrechtzuerhalten. Die in dieser Antwort aufgezeigten Unterschiede zeigen, wie sich ihr Verhalten geringfügig unterscheidet. Wenn live()es so geändert wird, dass es das Verhalten von hat on(), kann es vorhandenen Code beschädigen. Die jQuery-Leute haben gezeigt, dass sie nicht unbedingt Angst haben, Legacy-Code zu "brechen", aber ich nehme an, dass sie in diesem Fall entschieden haben, dass es sinnvoll ist, keine Regressionen zu riskieren.
Rinogo
Sieht so aus. live()wurde in 1.7 veraltet und in 1.9 entfernt. api.jquery.com/live
rinogo
11

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.

ajbeaven
quelle
4

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! [...]

FloydThreepwood
quelle
2
.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.");
});
Mohammed Abrar Ahmed
quelle
1

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!
venkat
quelle
0

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

Hiren
quelle
Willkommen bei SO. Versuchen Sie bitte, Ihre Antworten zu erläutern und nicht nur Links bereitzustellen. Antworten nur mit Links werden hier als schlechte Praxis angesehen.
Mata
Danke .. Ich werde dies für die zukünftige Antwort im Gedächtnis behalten .. :)
Hiren
0

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.

PixelPerfect3
quelle
10
Sie müssen es falsch verwenden - es hat eine etwas andere Syntax als die .live()Methode. Das Äquivalent .on()für $('p').live('click', function () { alert('clicked'); });ist $(document).on('click', 'p', function () { alert('clicked'); });. Beachten Sie, dass Sie die .on()Methode für das verwenden documentund dann das Element, an das Sie den Ereignishandler anhängen möchten, in seinem zweiten Parameter anhören möchten.
Ajbeaven
1
Weitere Informationen hierzu finden Sie hier: api.jquery.com/on . Schauen Sie unter der Überschrift Direkte und delegierte Ereignisse
ajbeaven
1
Ich würde vorschlagen, auch diesen Artikel zu lesen: elijahmanor.com/2012/02/…
ajbeaven
1
Wir können auch $ (Selektor1) .on (Ereignis, Selektor2, Funktion) ausführen, wobei Selektor1 übergeordnet und Selektor2 untergeordnet von Selektor1 ist. Dies minimiert den Suchbereich, da Sie nicht das gesamte Dokument durchsuchen müssen.
Ramsharan
1
@ajbeaven du solltest deinen ersten Kommentar hier in eine Antwort verwandeln (das war es, wonach ich gesucht habe, als ich hier ankam).
Atwright147
-1

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

NS
quelle
1
Dies ist nicht wahr, Sie müssen es .onfalsch verwenden oder etwas anderes in Ihrem Code verursacht dies. Fügen Sie möglicherweise Ihren Code für Ihre .onMethode ein.
Ajbeaven
Ja. Das ist nicht wahr. .on () ist eine verbesserte Version von .live (). Fügen Sie hier Ihren Code ein. Damit wir etwas Klarheit haben
RecklessSergio