Differenza tra .on ('click') vs .click ()
Risposte:
Penso che la differenza sia nei modelli di utilizzo.
Preferirei .onpiù .clickperché il primo può usare meno memoria e lavorare per elementi aggiunti dinamicamente.
Considera il seguente html:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>dove aggiungiamo nuovi pulsanti tramite
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});e vuoi "Avviso!" per mostrare un avviso. Per questo possiamo usare "click" o "on".
Quando usiamo click
$("button.alert").click(function() {
alert(1);
});con quanto sopra, viene creato un gestore separato per ogni singolo elemento che corrisponde al selettore. Questo significa
- molti elementi corrispondenti creerebbero molti gestori identici e quindi aumenterebbero il footprint di memoria
- gli articoli aggiunti dinamicamente non avranno il gestore - vale a dire, nell'html sopra il "Avviso!" appena aggiunto i pulsanti non funzioneranno se non si ricollega il gestore.
Quando usiamo .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});con quanto sopra, un unico gestore per tutti gli elementi che corrispondono al tuo selettore, compresi quelli creati dinamicamente.
... un altro motivo per usare .on
Come ha commentato di seguito Adrien, un altro motivo per utilizzare .onè rappresentato dagli eventi con spaziatura dei nomi.
Se aggiungi un gestore con .on("click", handler)te lo rimuovi normalmente con il .off("click", handler)quale rimuoverà quel gestore. Ovviamente questo funziona solo se hai un riferimento alla funzione, quindi cosa succede se non lo fai? Usa gli spazi dei nomi:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });con svincolo via
$("#element").off("click.someNamespace");on('click' ...), vedi stackoverflow.com/a/3973060/759452 ie. on('click.darkenallothersections' ...)e allo stesso tempo on('click.displaynextstep' ...), allora posso sciogliere solo quello che scelgo usando.unbind('click.displaynextstep')
on()è la tendenza in jQuery. Ho dovuto eseguire l'aggiornamento $(window).load(function() {});a $(window).on("load", function (e) {})jQuery 3.
C'è qualche differenza tra il seguente codice?
No, non esiste alcuna differenza funzionale tra i due esempi di codice nella domanda. .click(fn)è un "metodo di scelta rapida" per .on("click", fn). Dalla documentazione per.on() :
Esistono metodi abbreviati per alcuni eventi come quelli
.click()che possono essere utilizzati per collegare o attivare gestori di eventi. Per un elenco completo dei metodi di stenografia, vedere la categoria degli eventi .
Si noti che .on()differisce dal fatto .click()che ha la possibilità di creare gestori di eventi delegati passando un selectorparametro, mentre .click()non lo è. Quando .on()viene chiamato senza un selectorparametro, si comporta esattamente come .click(). Se si desidera la delega degli eventi, utilizzare .on().
selectorparametro. Se si chiama .on()senza un selectorparametro, non vi è alcun miglioramento delle prestazioni rispetto all'utilizzo .click().
.on()è il modo consigliato per eseguire il binding di tutti gli eventi a partire da jQuery 1.7. Rotola tutte le funzionalità di entrambi .bind()e .live()in una funzione che altera il comportamento quando si passano parametri diversi.
Come hai scritto il tuo esempio, non c'è differenza tra i due. Entrambi vincolano un gestore clickall'evento di #whatever. on()offre ulteriore flessibilità nel consentire all'utente di delegare eventi attivati da bambini #whatevera una singola funzione di gestore, se lo si desidera.
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });.live()fa? Inoltre, questo sembra contraddire le altre risposte che affermano che ha solo la funzionalità di .click(), e quindi non si applica agli eventi futuri.
.on()può fare ciò che .click()fa e fare cosa .bind()e .live()fare - dipende da quali parametri lo chiami. (Alcune altre risposte hanno menzionato anche questo.) Nota però che "Associa a tutti i collegamenti all'interno di #whatever" non è ciò che .live()fa, è ciò che .delegate()fa. .live()si lega a tutti gli interni documentanziché lasciarti specificare il contenitore. Nota anche .live()è deprecato da jQuery 1.7 in poi.
Come menzionato dalle altre risposte:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })Notando però che .on()supporta diverse altre combinazioni di parametri che .click()non lo fanno, permettendogli di gestire la delega di eventi (superceding .delegate()e .live()).
(E ovviamente ci sono altri metodi di scelta rapida simili per "keyup", "focus", ecc.)
Il motivo per cui sto postando una risposta extra è menzionare cosa succede se si chiama .click()senza parametri:
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");Notando che se lo usi .trigger()direttamente puoi anche passare parametri extra o un oggetto evento jQuery, che non puoi fare .click().
Volevo anche menzionare che se guardi il codice sorgente di jQuery (in jquery-1.7.1.js) vedrai che internamente la funzione .click()(o .keyup(), ecc.) Chiamerà effettivamente .on()o .trigger(). Ovviamente questo significa che puoi essere certo che hanno davvero lo stesso risultato, ma significa anche che l'utilizzo .click()ha un po 'più di costi generali - non c'è nulla di cui preoccuparsi o addirittura pensare nella maggior parte delle circostanze, ma teoricamente potrebbe importare in circostanze straordinarie.
EDIT: Infine, si noti che .on()consente di associare più eventi alla stessa funzione in una riga, ad esempio:
$("#whatever").on("click keypress focus", function(){});.click().)
Sembrano essere gli stessi ... Documentazione dalla funzione click () :
Questo metodo è un collegamento per .bind ('click', gestore)
Documentazione dalla funzione on () :
A partire da jQuery 1.7, il metodo .on () fornisce tutte le funzionalità necessarie per collegare i gestori di eventi. Per assistenza nella conversione da metodi di eventi jQuery precedenti, consultare .bind (), .delegate () e .live (). Per rimuovere gli eventi associati a .on (), consultare .off ().
.clickvs.on
.click gli eventi funzionano solo quando viene eseguito il rendering dell'elemento e sono collegati solo agli elementi caricati quando il DOM è pronto.
.on gli eventi sono collegati dinamicamente agli elementi DOM, il che è utile quando si desidera associare un evento agli elementi DOM che sono resi su richiesta Ajax o qualcos'altro (dopo che il DOM è pronto).
Qui troverai l'elenco dei diversi modi di applicare l'evento click. Puoi selezionare di conseguenza come gradevole o se il tuo clic non funziona basta provare un'alternativa tra queste.
$('.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
})Per quanto riguarda ilearned da internet e alcuni amici .on () viene utilizzato quando si aggiungono elementi in modo dinamico. Ma quando l'ho usato in una semplice pagina di accesso in cui l'evento click dovrebbe inviare AJAX a node.js e al ritorno aggiungere nuovi elementi ha iniziato a chiamare chiamate multi-AJAX. Quando l'ho cambiato per fare clic su () è andato tutto bene. In realtà non ho affrontato questo problema prima.
NUOVI ELEMENTI
Come aggiunta alle risposte complete sopra per evidenziare i punti critici se si desidera che il clic si allega a nuovi elementi:
- gli elementi selezionati dal primo selettore, ad esempio $ ("body") devono esistere al momento della dichiarazione, altrimenti non c'è nulla a cui allegare.
- è necessario utilizzare i tre argomenti nella funzione .on () incluso il selettore valido per gli elementi target come secondo argomento.
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- è più efficace di $ ('. UPDATE'). click (function () {});
- può usare meno memoria e lavorare per elementi aggiunti dinamicamente.
- un po 'di tempo i dati recuperati dinamici con il pulsante modifica ed elimina non generano l'evento JQuery al momento della MODIFICA O ELIMINA DATI dei dati di riga nel modulo, quel tempo
$(document).on('click','.UPDATE',function(){ });funziona effettivamente come gli stessi dati recuperati usando jquery. pulsante non funzionante al momento dell'aggiornamento o dell'eliminazione:
