Jquery .on con l'evento DoubleClick

Question

Perché sarebbe questo lavoro:

$(document).on("dblclick", "#areaA tr:has(td)", function(e) { 
    //code here 
}); 

e questo non

$("#areaA tr:has(td)").on('dblclick', function(e) { 
    //Code here 
}); 

Sto seguendo l'esempio sulla pagina di documentazione jquery esattamente, ma il mio doppio click fa non fuoco Quando lo faccio nel primo modo, funziona, ma sembra che spari l'evento due volte.

Questo è nel contesto di una griglia di interfaccia utente Kendo.

C'è davvero una differenza tra questi due pezzi di codice?

Answer 1

La differenza principale è che la condizione nel primo verrà controllata ogni volta che si fa clic. Pertanto, se l'elemento con ID areaA o tr o td all'interno viene aggiunto dinamicamente, solo il primo può funzionare.

Answer 2

C'è davvero una differenza tra questi due pezzi di codice?

Sì. La prima parte di codice è una forma di gestione degli eventi delegata in cui il gestore viene attivato da eventi che fanno ribollire il documento che sono stati attivati ​​dagli elementi discendenti. Il secondo collega un gestore di eventi all'elemento reale restituito da jQuery per il selettore designato (in   questo   caso   #areaA tr:has(td)).

Ecco le informazioni pertinenti dalla documentazione jQuery:

primo pezzo di codice:

eventi delegati hanno il vantaggio di poter elaborare gli eventi da elementi discendenti che vengono aggiunti al documento in un momento successivo . Selezionando un elemento che è garantito essere presente alla volta il gestore di eventi delegato è collegato, è possibile utilizzare gli eventi delegati per evitare la necessità di collegare e rimuovere frequentemente i gestori di evento .

secondo pezzo di codice:

I gestori di eventi sono legati solo agli elementi attualmente selezionati; essi devono esistere al momento il codice effettua la chiamata a .On()

Answer 3

Il primo metodo si descrive funziona perché si sta selezionando un genitore statica e poi un bambino dinamica, che segue le regole di eventi legame elementi creati dinamicamente con il metodo .on.

Ecco la sintassi per il metodo .on, che suona come se avessi già studiato un po '.

$(selector).on(event,childSelector,data,function,map) 

Quindi, se voglio di legarsi ad un elemento dinamico con .on, devo simbolo del dollaro selezionare un elemento padre statica prima poi, all'interno del metodo .on, selezionare l'elemento figlio dinamico. Nel tuo caso il caso d'uso corretto dovrebbe funzionare in questo modo:

$("body").on('dblclick', '#areaA tr:has(td)', function(e) { 
    //Code here 
}); 

Dal momento che lei ha citato non funzionava Sto assumendo #areaA non è un elemento statico. È possibile sostituire il corpo per un elemento statico più rilevante, o semplicemente lasciarlo al corpo, non ha molta importanza.