jQuery .on() con più selettori nella delega degli eventi?

Question

Ho utilizzato .on() in jQuery 1.7 e mi chiedevo se fosse possibile collegare più selettori alla volta per elementi che sono stati iniettati in una pagina. Precedentemente, stavo usando live() - ma è ovvio perché voglio spostare determinati miglioramenti delle prestazioni.

Si può utilizzare .on() nella maniera simile:

$(document).on('click', '#selector1, #selector2, .class1', function() { 
    //stuff 
}); 

e ci sono tutti i benefici persi nel allegando al documento?

?

Answer 1

1. Potete utilizzare .on() in modo simile:

   $(document).on('click', '#selector1, #selector2, .class1', function() { 
       //stuff 
   }); 
   

   Yes, that will work.

2. voglio usare questo invece di live() dato miglioramenti delle prestazioni.

   Non ci sono non vantaggi di prestazioni di usare quel frammento di codice anziché utilizzare live(), come live() si lega gli eventi al documento, e in jQuery 1.7, le chiamate dal vivo on dietro le quinte.

3. E ci sono dei benefici persi nel collegamento al documento?

   L'inconveniente di legarsi a document è che l'evento deve attraversare l'intero elenco di antenati prima che sia gestito; questo, as pointed out in the jQuery documentation, è il percorso più lento possibile. Sarà meglio gestire l'evento prima, collegando il gestore a un elemento più vicino all'origine dell'evento.

Answer 2

è possibile e "questo" è il selettore cliccato, non il documento.

è meglio collegarsi all'elemento padre più vicino del proprio selettore. Quando fai clic su "# selector1", l'evento si apre all'elemento gestore eventi, qui: documento.

Più livelli, più azioni. Inoltre, se tra selector1 e documento esiste un altro gestore di eventi click, può essere intercettato con event.stopPropagation(); e non raggiungere mai il gestore di eventi "documento".

è possibile controllare l'evento anomalo "intercettazione" in this fiddle.