Różnica między.on ('click') vs. click()

Czy jest jakaś różnica między poniższym kodem?

Nie, Nie ma funkcjonalnej różnicy między dwoma próbkami kodu w twoim pytaniu. .click(fn) jest "metodą skrótu" dla .on("click", fn). Z dokumentacji dla .on():

Istnieją metody skrótów dla niektórych zdarzeń, takich jak .click() może być używany do dołączania lub wyzwalania procedur obsługi zdarzeń. Pełna lista metod skrótu znajduje się w zdarzeniach Kategoria .

Zauważ, że .on() różni się od .click() tym, że ma możliwość tworzenia delegowanych procedur obsługi zdarzeń przez podanie parametru selector, podczas gdy .click() nie. Gdy .on() jest wywołana bez parametru selector, zachowuje się dokładnie tak samo jak .click(). Jeśli chcesz przekazać Zdarzenie, użyj .on().

.on() jest zalecanym sposobem wykonywania wszystkich wiązań zdarzeń od jQuery 1.7. Zwija wszystkie funkcje .bind() i .live() w jedną funkcję, która zmienia zachowanie, gdy przekazujesz mu różne parametry.

Jak napisałeś swój przykład, nie ma różnicy między tymi dwoma. Oba wiążą handler ze zdarzeniem click #whatever. on() oferuje dodatkową elastyczność pozwalającą na delegowanie zdarzeń wywołanych przez dzieci z #whatever do pojedynczej funkcji obsługi, jeśli wybierz.

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

Jak wspomniano przez inne odpowiedzi:

$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })

Zauważając jednak, że .on() obsługuje kilka innych kombinacji parametrów, które .click() nie działają, pozwalając na obsługę delegacji zdarzeń (superceding .delegate() i .live()).

(i oczywiście istnieją inne podobne metody skrótów dla "keyup"," focus", itp.)

Powodem, dla którego zamieszczam dodatkową odpowiedź, jest wzmianka, co się stanie, jeśli zadzwonisz .click() bez parametrów:

$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");

Zauważając, że jeśli użyjesz .trigger() bezpośrednio możesz również przekazać dodatkowe parametry lub obiekt zdarzenia jQuery, którego nie możesz zrobić za pomocą .click().

Chciałem również wspomnieć, że jeśli spojrzeć na kod źródłowy jQuery (w jquery-1.7.1.js) zobaczysz, że wewnętrznie .click() (lub .keyup(), itp.) funkcja faktycznie wywoła .on() lub .trigger(). Oczywiście oznacza to, że możesz być pewien, że naprawdę mają ten sam wynik, ale oznacza to również, że używanie .click() ma trochę więcej kosztów-nie ma się czym martwić ani nawet myśleć w większości okoliczności, ale teoretycznie może to mieć znaczenie w nadzwyczajnych okolicznościach.

EDIT: na koniec zauważ, że .on() pozwala powiązać kilka zdarzeń z tą samą funkcją w jednej linii, np.:

$("#whatever").on("click keypress focus", function(){});

.click zdarzenia działają tylko wtedy, gdy element jest renderowany i są dołączane tylko do elementów załadowanych, gdy DOM jest gotowy.

.on zdarzenia są dynamicznie dołączane do elementów DOM, co jest pomocne, gdy chcesz dołączyć Zdarzenie do elementów DOM, które są renderowane na żądanie ajax lub coś innego (po tym, jak DOM jest gotowy).

Nie, Nie ma.]} Punktem on() jest jego inne przeciążenia i możliwość obsługi zdarzeń, które nie mają metod skrótów.

Wydają się być takie same... Dokumentacja z funkcji click () :

Ta metoda jest skrótem do .bind ('click', handler)

Dokumentacja zon () Funkcja:

Od jQuery 1.7,metoda on () zapewnia wszystkie wymagane funkcje do dołączania programów obsługi zdarzeń. Pomoc w konwersji ze starszego jQuery metody zdarzeń, patrz .bind (),delegat (), oraz .live (). Aby usunąć zdarzenia związany z .on (), Zobacz też .off().

Tutaj otrzymasz listę różnych sposobów zastosowania zdarzenia click. Możesz wybrać odpowiednio jako suaitable lub jeśli twoje kliknięcie nie działa, po prostu wypróbuj alternatywę z nich.

$('.clickHere').click(function(){ 
     // this is flat click. this event will be attatched 
     //to element if element is available in 
     //dom at the time when JS loaded. 

  // do your stuff
});

$('.clickHere').on('click', function(){ 
    // same as first one

    // do your stuff
})

$(document).on('click', '.clickHere', function(){
          // this is diffrent type 
          //  of click. The click will be registered on document when JS 
          //  loaded and will delegate to the '.clickHere ' element. This is 
          //  called event delegation 
   // do your stuff
});

$('body').on('click', '.clickHere', function(){
   // This is same as 3rd 
   // point. Here we used body instead of document/

   // do your stuff
});

$('.clickHere').off().on('click', function(){ // 
    // deregister event listener if any and register the event again. This 
    // prevents the duplicate event resistration on same element. 
    // do your stuff
})

Są już przestarzałe click (), więc najlepiej przejść do on ('click')

Jeśli chodzi o internet i znajomych .funkcja on() jest używana podczas dynamicznego dodawania elementów. Ale kiedy użyłem go w prostej stronie logowania, gdzie click event powinien wysłać AJAX do węzła.js i po powrocie do dodawania nowych elementów zaczął wywoływać połączenia wielowątkowe. Kiedy zmieniłem go na click () wszystko poszło dobrze. Właściwie nie miałem wcześniej do czynienia z tym problemem.

NOWE ELEMENTY

Jako dodatek do wyczerpujących odpowiedzi powyżej, aby podkreślić punkty krytyczne, jeśli chcesz kliknąć, aby dołączyć do nowych elementów:

1. elementy wybrane przez pierwszy selektor np $("body") muszą istnieć w momencie składania deklaracji, w przeciwnym razie nie ma do czego się dołączyć.
2. musisz użyć trzech argumentów w .funkcja on () zawiera poprawny selektor dla elementów docelowych jako drugi argument.

$('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });

1. jest bardziej efektywna niż $('.UPDATE").click(function () { });
2. może zużywać mniej pamięci i pracować dla dynamicznie dodawanych elementów.
3. jakiś czas dynamiczne pobierane dane z przyciskiem Edytuj i usuń nie generują zdarzenia JQuery w czasie edycji lub usuwania danych wiersza danych w formie, że czas $(document).on('click','.UPDATE',function(){ }); jest efektywnie działać jak same pobrane dane za pomocą jquery. przycisk nie działa w momencie aktualizacji lub usunięcia: