Perché usare jQuery on () invece di click ()

Attualmente con jQuery quando devo fare qualcosa quando si verifica un clic lo farò in questo modo ...

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

Stavo guardando un codice che qualcun altro ha su un progetto e lo fanno in questo modo ...

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

Si noti che sembra fare la stessa cosa per quanto ne so, tranne che stanno usando la funzione live () che ora è deprecata e i documenti jQuery dicono di usare on()invece, ma in entrambi i casi perché usare live / on () invece del mio primo esempio?

Poiché potresti avere elementi generati dinamicamente (ad esempio provenienti da una chiamata AJAX), potresti voler avere lo stesso gestore di clic che era precedentemente associato allo stesso selettore di elementi, quindi "delegare" l'evento clic utilizzando on()con l'argomento selector

Dimostrare:

http://jsfiddle.net/AJRw3/

on()può anche essere sinonimo di click()se non hai un selettore specificato:

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

è sinonimo di

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

Nel senso che aggiunge solo una volta il gestore a tutti gli elementi con classe elementClass. Se hai un nuovo elementClassproveniente da, ad esempio $('<div class="elementClass" />'), il gestore non sarà vincolato a quel nuovo elemento, devi fare:

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

Supponendo che #containersia .elementClassl'antenato di

Ci sono molte risposte, ognuna toccando alcuni punti - si spera che questo possa darti la tua risposta, con una buona spiegazione di cosa è cosa e come usarlo.

Using click()è un alias per bind('click' ...). L'utilizzo bind()prende il DOM così com'è quando viene impostato il listener di eventi e associa la funzione a ciascuno degli elementi corrispondenti nel DOM. Vale a dire che se usi $('a').click(...)legherai la funzione fornita all'evento click di ogni anchor tag nel DOM trovato quando quel codice viene eseguito.

L'uso live()era il vecchio modo in jQuery; è stato utilizzato per legare eventi proprio come bind()fa, ma non si limita a legarli agli elementi nel DOM quando il codice viene eseguito, ma ascolta anche le modifiche nel DOM e vincolerà gli eventi anche a qualsiasi elemento con corrispondenza futura. Questo è utile se stai manipolando il DOM e hai bisogno che esista un evento su alcuni elementi che potrebbero essere rimossi / aggiornati / aggiunti al DOM in un secondo momento ma non esistono quando il DOM viene caricato per la prima volta.

Il motivo che live()ora è ammortizzato è perché è stato implementato male. Per live()poterlo utilizzare , devi essere in grado di selezionare almeno un elemento nel DOM inizialmente (credo). Ha anche causato l'esecuzione di una copia della funzione da associare a ciascun elemento e, se si hanno 1000 elementi, si tratta di molte funzioni copiate.

La creazione della on()funzione doveva superare questi problemi. Ti consente di associare un singolo listener di eventi a un oggetto che non cambierà nel DOM (quindi non puoi utilizzarlo on()su un elemento che verrà rimosso / aggiunto al DOM in un secondo momento, collegalo a un oggetto genitore) e applica semplicemente un elemento "filtro" in modo che la funzione venga eseguita solo quando viene aggiunta a un elemento che corrisponde al selettore. Ciò significa che hai solo una funzione esistente (non un mucchio di copie) associata a un singolo elemento: un approccio molto migliore per aggiungere eventi "live" nel DOM.

... e questo è ciò che sono le differenze, e perché ogni funzione esiste e perché live()è ammortizzata.

• $("a").live()-> Si applicherà a tutti <a>, anche se viene creato dopo che questo è stato chiamato.
• $("a").click()-> Si applicherà solo a tutti <a>prima che venga chiamato. (Questa è una scorciatoia di bind()e on()in 1.7)
• $("a").on()-> Fornisce tutte le funzionalità richieste per il collegamento di gestori di eventi. (Più recente in jQuery 1.7)

Citazioni :

A partire da jQuery 1.7, il metodo .live () è deprecato. Usa .on () per allegare gestori di eventi. Gli utenti di versioni precedenti di jQuery dovrebbero utilizzare .delegate () invece di .live ().
Questo metodo fornisce un mezzo per collegare gestori di eventi delegati all'elemento documento di una pagina, il che semplifica l'uso dei gestori di eventi quando il contenuto viene aggiunto dinamicamente a una pagina. Vedere la discussione sugli eventi diretti e delegati nel metodo .on () per ulteriori informazioni.

Il metodo .on () collega i gestori di eventi al set di elementi attualmente selezionato nell'oggetto jQuery. A partire da jQuery 1.7, il metodo .on () fornisce tutte le funzionalità richieste per collegare i gestori di eventi.

Per le versioni precedenti, il metodo .bind () viene utilizzato per collegare un gestore di eventi direttamente agli elementi.

click()è una scorciatoia per il metodo di non delega di on(). Così:

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

Per delegare eventi con on(), es. negli oggetti creati dinamici puoi fare:

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

Ma on()introduce la delega in qualsiasi elemento statico, non solo documentcome live()fa, quindi:

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

Dovresti leggere la differenza tra liveebind .

In poche parole, liveutilizza la delega degli eventi, consentendoti di collegarti a elementi che esistono ora e in futuro.

Al contrario, i gestori collegati tramite bind(e le sue scorciatoie, come click) collegano i gestori direttamente agli elementi DOM che corrispondono al selettore, e quindi sono vincolati solo agli elementi che esistono ora.

Una conseguenza della liveflessibilità di è una riduzione delle prestazioni, quindi usalo solo quando hai bisogno delle funzionalità che fornisce.

$el.click(fn) è una scorciatoia per $el.on('click', fn)

Vedi http://api.jquery.com/click/ e http://api.jquery.com/on/ per maggiori informazioni.

Quando è necessario associare alcuni gestori di eventi a dynamically added elementsè necessario utilizzare live(deprecato) o onfarlo funzionare. Semplicemente $('element').click(...);non funzionerà su alcun elemento aggiunto dinamicamente al DOM.

Ulteriori informazioni sulla differenza tra .bind (), .live () e .delegate () di jQuery .

$ .click () è semplicemente una scorciatoia per bind o on. Dai documenti jQuery:

Nelle prime due varianti, questo metodo è una scorciatoia per .bind ("click", handler), così come per .on ("click", handler) a partire da jQuery 1.7. Nella terza variante, quando .click () viene chiamato senza argomenti, è una scorciatoia per .trigger ("click").

Il .on()metodo collega i gestori di eventi al set di elementi attualmente selezionato nell'oggetto jQuery. Ilclick() metodo associa un gestore di eventi all'evento JavaScript "clic" o attiva tale evento su un elemento.

In parole povere, .click(...se l'obiettivo del selettore cambia al volo (ad esempio tramite una risposta ajax), allora dovresti assegnare nuovamente il comportamento.

Il .on(...è molto nuova (jQuery 1.7) e può coprire lo scenario dal vivo con eventi delegati che è un modo più veloce per collegare il comportamento in ogni caso.

Nel onmetodo, il gestore di eventi è collegato all'elemento genitore invece che a destinazione.

esempio: $(document).on("click", ".className", function(){});

Nell'esempio precedente, il gestore dell'evento clic è allegato al documento. E utilizza il bubbling degli eventi per sapere se qualcuno ha fatto clic sull'elemento di destinazione.