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

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.

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()!

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

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

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

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 ()!

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

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.

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