$ (document) .on (‘click’, ‘#id’, function () {}) vs $ (‘# id’). on (‘click’, function () {})

Stavo cercando di scoprire qual è la differenza tra

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

e

 $('#id').on('click', function(){}); 

Non sono stato in grado di trovare alcuna informazione se c’è qualche differenza tra i due e, in tal caso, quale potrebbe essere la differenza.

Qualcuno può spiegare se c’è qualche differenza?

Il primo esempio dimostra la delega degli eventi . Il gestore eventi è associato a un elemento più in alto dell’albero DOM (in questo caso, il document ) e verrà eseguito quando un evento raggiunge quell’elemento che ha avuto origine su un elemento che corrisponde al selettore.

Questo è ansible perché la maggior parte degli eventi DOM fa saltare l’albero dal punto di origine. Se fai clic sull’elemento #id , viene generato un evento click che esploderà attraverso tutti gli elementi dell’antenato ( nota a margine: in realtà c’è una fase prima, chiamata “fase di acquisizione”, quando l’evento scende dall’albero al bersaglio ). Puoi catturare l’evento su uno di questi antenati.

Il secondo esempio associa il gestore eventi direttamente all’elemento. L’evento continuerà a circolare (a meno che non lo si impedisca nel gestore) ma dal momento che il gestore è legato al target, non si vedranno gli effetti di questo processo.

Delegando un gestore di eventi, è ansible assicurarsi che sia eseguito per elementi che non esistevano nel DOM al momento del binding. Se il tuo elemento #id stato creato dopo il tuo secondo esempio, il tuo gestore non verrebbe mai eseguito. Legandosi a un elemento che si conosce sicuramente nel DOM al momento dell’esecuzione, si assicura che il gestore sia effettivamente associato a qualcosa e possa essere eseguito in un secondo momento.

Considera il seguente codice

 
  • Coding
  • Answering
  • Getting Paid

Ora, qui fa la differenza

 // Remove the myTask item when clicked. $('#myTask').children().click(function () { $(this).remove() }); 

Ora, cosa succede se aggiungiamo di nuovo un myTask?

 $('#myTask').append('
  • Answer this question on SO
  • ');

    Fare clic su questo object myTask non lo rimuoverà dall’elenco, poiché non ha alcun gestore di eventi associato. Se invece lo avessimo usato, il nuovo elemento funzionerebbe senza alcuno sforzo aggiuntivo da parte nostra. Ecco come apparirà la versione .on:

     $('#myTask').on('click', 'li', function (event) { $(event.target).remove() }); 

    Sommario:

    La differenza tra .on() e .click() potrebbe essere che .click() potrebbe non funzionare quando gli elementi DOM associati all’evento .click() vengono aggiunti dynamicmente in un secondo momento mentre .on() può essere utilizzato in situazioni in cui gli elementi DOM associati alla chiamata .on() possono essere generati dynamicmente in un momento successivo.