Jaka jest różnica między jQuery .live () a .on ()

85

Widzę, że .on()w jQuery 1.7 jest nowa metoda, która zastępuje .live()we wcześniejszych wersjach.

Interesuje mnie różnica między nimi i korzyści płynące z zastosowania tej nowej metody.

ajbeaven
źródło

Odpowiedzi:

99

To całkiem jasne w docs dlaczego nie chcesz używać na żywo. Również, jak wspomniał Felix, .onjest bardziej usprawniony sposób dołączania wydarzeń.

Używanie metody .live () nie jest już zalecane, ponieważ nowsze wersje jQuery oferują lepsze metody, które nie mają swoich wad. W szczególności podczas korzystania z .live () pojawiają się następujące problemy:

  • jQuery próbuje pobrać elementy określone przez selektor przed wywołaniem .live()metody, co może być czasochłonne w przypadku dużych dokumentów.
  • Metody łączenia nie są obsługiwane. Na przykład nie$("a").find(".offsite, .external").live( ... ); jest prawidłowy i nie działa zgodnie z oczekiwaniami.
  • Ponieważ wszystkie .live()zdarzenia są dołączone do documentelementu, przed obsłużeniem zdarzenia pokonują najdłuższą i najwolniejszą możliwą ścieżkę.
  • Wywołanie event.stopPropagation() procedury obsługi zdarzeń jest nieskuteczne w zatrzymywaniu funkcji obsługi zdarzeń dołączonych niżej w dokumencie; wydarzenie już się rozprzestrzeniło document.
  • W .live()współdziała metodę z innymi metodami wydarzenie w sposób, który może być zaskakujące, np $(document).unbind("click")usuwa wszystkie programy obsługi kliknięcia załączone przez każdego wywołania .live()!
aziz punjani
źródło
8
Zastanawiam się tylko, czy o to właśnie chodzi, dlaczego nie ulepszyli metody na żywo, zamiast stworzyć nową. Chyba że jest coś, co można zrobić na żywo, ale nie można tego zrobić?
neobie
1
@neobie, to po to, aby Twój kod był bardziej znaczący i jednolity
Om Shankar
@neobie: Wyobrażam sobie, że ma to na celu zachowanie wstecznej kompatybilności. Różnice wskazane w tej odpowiedzi pokazują, jak nieco różni się ich zachowanie. Gdyby live()zostały zmodyfikowane tak, aby zachowywały się jak on(), mogłoby to spowodować uszkodzenie istniejącego kodu. Ludzie z jQuery pokazali, że niekoniecznie boją się „złamania” starego kodu, ale przypuszczam, że w tym przypadku zdecydowali, że nie ma sensu ryzykować wprowadzania regresji.
rinogo
Wygląda na to, że tak jest. live()został wycofany w wersji 1.7 i usunięty w wersji 1.9. api.jquery.com/live
rinogo
11

Jedyną różnicą, na którą natkną się ludzie podczas przechodzenia z .live()do, .on()jest to, że parametry .on()są nieco inne podczas wiązania zdarzeń z elementami dodanymi dynamicznie do DOM.

Oto przykład składni, której używaliśmy w .live()metodzie:

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

function doSomething() {
    // do something
}

Teraz, gdy .live()jest przestarzała w wersji jQuery 1.7 i usunięta w wersji 1.9, powinieneś użyć .on()metody. Oto równoważny przykład wykorzystujący .on()metodę:

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

function doSomething() {
    // do something
}

Pamiętaj, że odwołujemy się .on()do dokumentu, a nie do samego przycisku . Selektor elementu, którego zdarzeń słuchamy, określamy w drugim parametrze.

W powyższym przykładzie wywołuję .on()dokument, jednak uzyskasz lepszą wydajność, jeśli użyjesz elementu bliżej twojego selektora. Każdy element nadrzędny będzie działał, o ile istnieje na stronie przed wywołaniem .on().

Jest to wyjaśnione w dokumentacji, ale dość łatwo jest przeoczyć.

ajbeaven
źródło
4

Zobacz oficjalny blog

[..] Nowe interfejsy API .on () i .off () ujednolicają wszystkie sposoby dołączania zdarzeń do dokumentu w jQuery - a ich wpisywanie jest krótsze! [...]

FloydThreepwood
źródło
2
.live()

Ta metoda służy do dołączania programu obsługi zdarzeń dla wszystkich elementów, które pasują do bieżącego selektora, teraz i w przyszłości.

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

i

.on()

Ta metoda służy do dołączania funkcji obsługi zdarzeń dla jednego lub większej liczby zdarzeń do wybranych elementów poniżej jest przykładem.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});
Mohammed Abrar Ahmed
źródło
1

Dobry samouczek na temat różnicy między na żywo a na żywo

Cytat z powyższego linku

Co jest nie tak z .live ()

Używanie metody .live () nie jest już zalecane, ponieważ nowsze wersje jQuery oferują lepsze metody, które nie mają swoich wad. W szczególności podczas korzystania z .live () pojawiają się następujące problemy:

  1. jQuery próbuje pobrać elementy określone przez selektor przed wywołaniem metody .live (), co może być czasochłonne w przypadku dużych dokumentów.
  2. Metody łączenia nie są obsługiwane. Na przykład $ („a”). Find („. Offsite, .external”). Live (…); jest nieprawidłowy i nie działa zgodnie z oczekiwaniami.
  3. Ponieważ wszystkie zdarzenia .live () są dołączane do elementu dokumentu, przed obsłużeniem zdarzenia pokonują najdłuższą i najwolniejszą możliwą ścieżkę.
  4. Wywołanie zdarzenia event.stopPropagation () w module obsługi zdarzeń jest nieskuteczne w zatrzymywaniu procedur obsługi zdarzeń dołączonych niżej w dokumencie; wydarzenie zostało już rozpowszechnione w celu udokumentowania.
  5. Metoda .live () współdziała z innymi metodami zdarzeń w sposób, który może być zaskakujący, np. $ (Dokument) .unbind („kliknięcie”) usuwa wszystkie moduły obsługi kliknięć dołączone przez dowolne wywołanie .live ()!
venkat
źródło
0

aby uzyskać więcej informacji, sprawdź to .. .live () i .on ()

Metoda .live () jest używana, gdy zajmujesz się dynamicznym generowaniem treści ... tak jak stworzyłem w programie, który dodaje kartę, gdy zmieniam wartość suwaka Jquery i chcę dołączyć funkcję przycisku zamykania do każdej karty który wygeneruje ... kod, który próbowałem, to ...

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" );
        });

i działa całkiem fajnie ...

Hiren
źródło
Witamy w SO. Spróbuj rozwinąć swoje odpowiedzi i nie podawaj tylko linków, odpowiedzi zawierające tylko linki są tutaj uważane za złą praktykę.
mata
Dzięki… Będę o tym pamiętać dla przyszłej odpowiedzi… :)
Hiren
0

Jestem autorem rozszerzenia Chrome „Comment Save”, które używa jQuery, i takiego, które używało .live(). Sposób działania rozszerzenia polega na dołączeniu słuchacza do wszystkich obszarów tekstu za pomocą. live()- działało to dobrze, ponieważ za każdym razem, gdy dokument się zmieniał, nadal dołączał słuchacza do wszystkich nowych obszarów tekstu.

Przeprowadziłam się do, .on()ale to też nie działa. Nie dołącza nasłuchiwania za każdym razem, gdy dokument się zmienia - więc wróciłem do używania .live(). To chyba błąd .on(). Chyba tylko uważaj.

PixelPerfect3
źródło
10
Musisz go używać źle - ma nieco inną składnię niż .live()metoda. Ekwiwalent .on()za $('p').live('click', function () { alert('clicked'); });to $(document).on('click', 'p', function () { alert('clicked'); });. Zauważ, że używasz .on()metody w, documenta następnie określasz element, do którego chcesz dołączyć procedurę obsługi zdarzeń do nasłuchiwania, w drugim parametrze.
ajbeaven
1
Możesz przeczytać więcej na ten temat tutaj: api.jquery.com/on . Spójrz pod nagłówkiem Bezpośrednie i delegowane wydarzenia
ajbeaven
1
Proponuję również przeczytać ten artykuł: elijahmanor.com/2012/02/…
ajbeaven
1
Możemy również zrobić $ (selector1) .on (event, selector2, function), gdzie selector1 jest rodzicem, a selector2 jest dzieckiem selector1. Minimalizuje to obszar wyszukiwania, ponieważ nie musisz przeszukiwać całego dokumentu.
Ramsharan
1
@ajbeaven, powinieneś zamienić swój pierwszy komentarz tutaj w odpowiedź (właśnie tego szukałem, kiedy tu przyjechałem).
atwright147
-1

Mam wymóg identyfikacji zdarzenia zamknięcia przeglądarki. Po przeprowadzeniu badań wykonuję następujące czynności przy użyciu jQuery 1.8.3

  1. Włącz flagę za pomocą następującego jQuery po kliknięciu hiperłącza

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

  2. Włącz flagę za pomocą następującego jQuery, gdy zostanie kliknięty przycisk wprowadzania typu przesyłania

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

  1. Włącz flagę za pomocą następującego jQuery, gdy nastąpi przesłanie formularza

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

Teraz ważna rzecz ... moje rozwiązanie działa tylko wtedy, gdy zamiast tego użyję .live .on. Jeśli użyję .on, zdarzenie zostanie uruchomione po przesłaniu formularza i jest za późno. Wiele razy moje formularze są przesyłane za pomocą wywołania javascript (document.form.submit)

Jest więc kluczowa różnica między .live i .on. Jeśli używasz .live, Twoje zdarzenia są uruchamiane natychmiast, ale jeśli przełączysz się na .on, nie będą uruchamiane na czas

NS
źródło
1
To nie jest prawda, musisz używać .onnieprawidłowo lub coś innego w kodzie jest przyczyną tego. Być może wklej kod dla swojej .onmetody.
ajbeaven
Tak. To nie jest prawda. .on () jest ulepszoną wersją .live (). Więc wklej tutaj swój kod. Abyśmy mieli trochę jasności
RecklessSergio