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

Question

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

Interesuje mnie różnica między nimi a korzyściami płynącymi z zastosowania tej nowej metody.

Answer 1

Jest całkiem jasne, w docs, dlaczego nie chcesz używać na żywo. Również jak wspomniał Felix, .on jest bardziej usprawnionym sposobem dołączania zdarzeń.

Zastosowanie metody .live() nie jest zalecane, ponieważ później wersje jQuery oferują lepsze metody, które nie mają swoich wady. W szczególności następujące kwestie wynikają z wykorzystaniem .live():

• jQuery próbuje odzyskać elementy określone przez selektor przed wywołaniem metody .live(), które mogą być czasochłonne na dużych dokumentach.
• Metody łączenia nie są obsługiwane. Na przykład $("a").find(".offsite, .external").live(...); jest nie ważny i nie działa zgodnie z oczekiwaniami.
• Ponieważ wszystkie zdarzenia .live() są dołączone do elementu document, zdarzenia podejmują najdłuższą i najwolniejszą możliwą ścieżkę przed ich obsługą.
• Wywołanie event.stopPropagation() w procedurze obsługi zdarzeń jest nieskuteczne w zatrzymywaniu modułów obsługi zdarzeń dołączonych dolnych w dokumencie; zdarzenie zostało już propagowane do document.
• Sposób .live() współdziała z innymi metodami zdarzeń 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 wezwania do .live()!

Answer 2

Patrz official Blog

[..] Nowa .on() i .off (API) ujednolicić wszystkie sposoby mocowania zdarzenia do dokumentu w jQuery - i są one krótsze, aby wpisać ! [...]

Answer 3

Good tutorial on difference between on vs live

Cytat z powyższego linku

Co jest nie tak z .live()

Zastosowanie metody .live() nie jest zalecane, ponieważ później wersje jQuery oferują lepsze metody, które nie mają wad w wersji . W szczególności następujące kwestie wynikają z wykorzystaniem .live():

1. jQuery próbuje odzyskać elementy określone przez selektor przed wywołaniem.Metoda live(), która może być czasochłonna przy dużych dokumentach.
2. Metody łączenia nie są obsługiwane. Na przykład: $ ("a"). Find (".offsite, .external"). Live (...); jest nieprawidłowe i nie działa zgodnie z oczekiwaniami.
3. Ponieważ wszystkie zdarzenia .live() są dołączone do elementu dokumentu , zdarzenia przechodzą najdłuższą i najwolniejszą możliwą ścieżkę , zanim zostaną obsłużone.
4. Wywołanie zdarzenia event.stopPropagation() w przypadku obsługa jest nieskuteczna w zatrzymywaniu procedur obsługi zdarzeń dołączonych poniżej w dokumencie ; zdarzenie zostało już propagowane do dokumentu.
5. .live() metoda współdziała z innymi metodami zdarzeń w sposób, który może być zaskakujące, np $ (document) .unbind („kliknięcie”) usuwa wszystkie kliknij ładowarki dołączone przez każde wezwanie do .live() !

Answer 4

Jestem autorem rozszerzenia Chrome "Comment Save" który wykorzystuje jQuery, i jeden, który stosowany .live(). Sposób działania rozszerzenia polega na dołączeniu detektora do wszystkich używanych tekstów. live() - działało to dobrze, ponieważ za każdym razem, gdy zmieniał się dokument, nadal dołączał słuchacza do wszystkich nowych tekstów.

Przeprowadziłem się do .on(), ale to nie działa tak dobrze. Nie dołącza on detektora, gdy tylko dokument się zmienia - więc wróciłem do korzystania z .live(). To jest błąd, który wydaje mi się w .on(). Tylko uważaj na to, jak sądzę.

Answer 5

Jedną różnicą, że ludzie potykają się, gdy przejście od .live() do .on() jest to, że parametry .on() różnią się nieznacznie podczas wiązania zdarzeń do elementów dodawanych dynamicznie do DOM.

Oto przykład składni użyliśmy do korzystania z metody .live():

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

function doSomething() { 
    // do something 
} 

Teraz .live() wycofywana w jQuery wersji 1.7 i usunięte w wersji 1.9, należy użyć metody .on(). Oto odpowiednik przykład stosując metodę .on():

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

function doSomething() { 
    // do something 
} 

Należy pamiętać, że dzwonisz .on() przeciwko dokumentu zamiast samego przycisku. Wyznaczamy selektor dla elementu, którego zdarzenia nasłuchują w drugim parametrze.

W powyższym przykładzie dzwonię pod numer .on(), ale uzyskasz lepszą wydajność, jeśli użyjesz elementu znajdującego się bliżej selektora. Każdy element przodka będzie działać tak długo, jak istnieje na stronie, zanim zadzwonisz pod numer .on().

Zostało to wyjaśnione here in the documentation, ale dość łatwo je przeoczyć.

Answer 6

Mam wymóg identyfikacji zdarzenia zamkniętego przeglądarki. Po wykonaniu Doing to z badań robię następujące przy użyciu jQuery 1.8.3

1. Włączyć flagą stosując następujący jQuery podczas kliknięcia hiperłącza

   $ ('a') żyć ('click', function() {cleanSession = false;}).;

2. włączyć flagę stosując następujące jQuery, gdy za każdym razem typ przycisk wejście złożyć kliknięciu

$ ("input [type = submit]"). Żyć ('click', function() {alert (kliknięty przycisk "input"); cleanSession = false;});

1. włączyć flagę stosując następujące jQuery gdy każda forma czas przedstawić dzieje

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

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

Istnieje kluczowa różnica między .live i .on. Jeśli używasz .live Twoje wydarzenia wylecieć natychmiast, ale po przełączeniu go do .Na nie zostanie zwolniony na czas

Answer 7

uzyskać więcej informacji to sprawdzić ..

.live() metoda jest .live() i .on() używane, gdy mamy do czynienia z dynamicznym generowaniem treści ... tak jak stworzyłem program, który dodaje kartę, gdy zmieniam wartość suwaka Jquery i chcę dołączyć funkcjonalność przycisku zamykania do każdej zakładki, która wygeneruje ... kod 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 znacznie preety cool ...

Answer 8

.live() 

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

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

i

.on() 

Metoda ta służy do mocowania funkcję obsługi zdarzeń dla jednego lub więcej zdarzeń, do wybranych elementów poniżej jest przykładem.