Po co używać jQuery on () zamiast click ()

Obecnie z jQuery, gdy muszę coś zrobić, gdy pojawi się kliknięcie, zrobię to w ten sposób ...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

Patrzyłem na kod, który ktoś inny ma w projekcie i robią to w ten sposób ...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

Zauważ, że wydaje się, że robi to samo, o ile wiem, z wyjątkiem tego, że używają funkcji live (), która jest teraz przestarzała, a dokumenty jQuery mówią, że należy jej używać, on()ale tak czy inaczej, po co używać live / on () zamiast mojego pierwszego przykładu?

Ponieważ możesz mieć dynamicznie generowane elementy (na przykład pochodzące z wywołania AJAX), możesz chcieć mieć tę samą procedurę obsługi kliknięcia, która była wcześniej powiązana z tym samym selektorem elementu, a następnie „delegujesz” zdarzenie click przy użyciu on()argumentu selector

Aby zademonstrować:

http://jsfiddle.net/AJRw3/

on()może być również synonimem, click()jeśli nie masz określonego selektora:

$('.elementClass').click(function() { // code 
});

jest synonimem

$('.elementClass').on('click', function() { // code
});

W tym sensie, że program obsługi jest dodawany tylko raz do wszystkich elementów z klasą elementClass. Jeśli na przykład masz nowe elementClasswejście z, $('<div class="elementClass" />')handler nie będzie powiązany z tym nowym elementem, musisz zrobić:

$('#container').on('click', '.elementClass', function() { // code
});

Zakładając, że #containerjest .elementClassprzodkiem

Odpowiedzi jest wiele, z których każda dotyka kilku punktów - miejmy nadzieję, że da ci to odpowiedź, z dobrym wyjaśnieniem, co jest czym i jak z niej korzystać.

Używanie click()jest aliasem do bind('click' ...). Użycie bind()przyjmuje DOM w takiej postaci, w jakiej jest on konfigurowany, i wiąże funkcję z każdym pasującym elementem DOM. Oznacza to, że jeśli użyjesz $('a').click(...), powiążesz funkcję dostarczoną ze zdarzeniem click każdego znacznika kotwicy w DOM znalezionym po uruchomieniu tego kodu.

Używanie live()było starym sposobem w jQuery; był używany do wiązania zdarzeń tak samo jak bind()robi, ale nie tylko wiąże je z elementami DOM, gdy kod jest uruchamiany, ale także nasłuchuje zmian w DOM i wiąże zdarzenia z dowolnymi przyszłymi dopasowanymi elementami. Jest to przydatne, jeśli wykonujesz manipulację DOM i chcesz, aby zdarzenie istniało na niektórych elementach, które mogą zostać później usunięte / zaktualizowane / dodane do DOM, ale nie istnieją podczas pierwszego ładowania DOM.

Powodem, który live()jest teraz amortyzowany, jest to, że został źle wdrożony. Aby z niego skorzystać live(), musiałeś być w stanie wybrać przynajmniej jeden element w DOM na początku (jak sądzę). Spowodowało to również, że kopia funkcji została uruchomiona, aby była powiązana z każdym elementem - a jeśli masz 1000 elementów, to jest dużo skopiowanych funkcji.

Stworzenie on()funkcji miało przezwyciężyć te problemy. Pozwala powiązać pojedynczy detektor zdarzeń z obiektem, który nie zmieni się w DOM (więc nie możesz użyć on()na elemencie, który zostanie później usunięty / dodany do DOM - powiąż go z obiektem nadrzędnym) i po prostu zastosuj element „filter”, dzięki czemu funkcja jest uruchamiana tylko wtedy, gdy zostanie przekazana do elementu pasującego do selektora. Oznacza to, że masz tylko jedną funkcję, która istnieje (nie kilka kopii) powiązaną z jednym elementem - znacznie lepsze podejście do dodawania wydarzeń „na żywo” w DOM.

... i na tym właśnie polegają różnice i dlaczego każda funkcja istnieje i dlaczego live()jest amortyzowana.

• $("a").live()-> Dotyczy wszystkich <a>, nawet jeśli zostanie utworzony po wywołaniu tego.
• $("a").click()-> Będzie to miało zastosowanie tylko do wszystkich <a>przed wywołaniem. (To jest skrót do bind()iw wersji on()1.7)
• $("a").on()-> Zapewnia wszystkie funkcje wymagane do dołączania programów obsługi zdarzeń. (Najnowsze w jQuery 1.7)

Cytaty :

Od wersji jQuery 1.7 metoda .live () jest przestarzała. Użyj .on (), aby dołączyć programy obsługi zdarzeń. Użytkownicy starszych wersji jQuery powinni używać .delegate () zamiast .live ().
Ta metoda umożliwia dołączenie delegowanych procedur obsługi zdarzeń do elementu dokumentu na stronie, co upraszcza korzystanie z procedur obsługi zdarzeń, gdy zawartość jest dynamicznie dodawana do strony. Aby uzyskać więcej informacji, zobacz omówienie zdarzeń bezpośrednich i delegowanych w metodzie .on ().

Metoda .on () dołącza programy obsługi zdarzeń do aktualnie wybranego zestawu elementów w obiekcie jQuery. Od jQuery 1.7 metoda .on () zapewnia wszystkie funkcje wymagane do dołączania programów obsługi zdarzeń.

We wcześniejszych wersjach metoda .bind () jest używana do dołączania procedury obsługi zdarzeń bezpośrednio do elementów.

click()jest skrótem do metody bez delegowania on(). Więc:

$(".close-box").click() === $(".close-box").on('click')

Do delegowania wydarzeń on()np. w dynamicznie utworzonych obiektach możesz:

$(document).on('click', '.close-box') // Same as $('.close-box').live()

Ale on()wprowadza delegację w dowolnym elementem statycznym, a nie tylko documentjak live()robi, więc:

$("#closestStaticElement").on('click', '.close-box')

Przeczytaj więcej na temat różnicy między liveibind .

Krótko mówiąc, liveużywa delegowania zdarzeń, umożliwiając tworzenie powiązań z elementami, które istnieją teraz iw przyszłości.

W przeciwieństwie do tego, moduły obsługi dołączone za pośrednictwem bind(i ich skróty, takie jak click) dołączają moduły obsługi bezpośrednio do elementów DOM pasujących do selektora, a zatem są powiązane tylko z elementami, które istnieją teraz.

Konsekwencją liveelastyczności jest obniżona wydajność, więc używaj jej tylko wtedy, gdy potrzebujesz funkcji, które zapewnia.

$el.click(fn) jest skrótem do $el.on('click', fn)

Więcej informacji można znaleźć pod adresem http://api.jquery.com/click/ i http://api.jquery.com/on/ .

Kiedy musisz powiązać niektóre programy obsługi zdarzeń dynamically added elements, musisz użyć live(przestarzałe) lub onsprawić, by działały. Po prostu $('element').click(...);nie będzie działać na żadnym dynamicznie dodawanym elemencie w DOM.

Więcej na temat różnicy między .bind (), .live () i .delegate () jQuery .

$ .click () jest jedynie skrótem do łączenia lub włączania. Z dokumentów jQuery:

W pierwszych dwóch odmianach ta metoda jest skrótem do .bind („klik”, obsługa), a także do .on („klik”, obsługa) od jQuery 1.7. W trzeciej odmianie, gdy .click () jest wywoływana bez argumentów, jest to skrót do .trigger („kliknięcie”).

.on()Sposób przykłada obsługi zdarzeń do wybranego zestawu elementów obiektu jQuery. click()Metoda wiąże obsługi zdarzeń dla zdarzenia „kliknij” Javascript, albo powoduje, że zdarzenie na elemencie.

Mówiąc prosto, .click(...jeśli cel selektora zmienia się w locie (np. Poprzez odpowiedź Ajax), wtedy trzeba by ponownie przypisać zachowanie.

Jest .on(...to bardzo nowe (jQuery 1.7) i może obejmować scenariusz na żywo przy użyciu delegowanych zdarzeń, co i tak jest szybszym sposobem na dołączenie zachowania.

W onmetodzie obsługa zdarzeń jest dołączana do elementu nadrzędnego zamiast celu.

przykład: $(document).on("click", ".className", function(){});

W powyższym przykładzie do dokumentu dołączony jest moduł obsługi zdarzenia kliknięcia. I używa propagacji zdarzeń, aby wiedzieć, czy ktoś kliknął element docelowy.