jQuery .on() con múltiples selectores en la delegación de eventos?

Question

Utilizo .on() en jQuery 1.7 y me pregunto si es posible adjuntar múltiples selectores a la vez para elementos que se han inyectado en una página. Anteriormente, estaba usando live(), pero es obvio por qué quiero mover las mejoras de rendimiento dadas.

¿Se puede utilizar .on() en la forma como:

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

y si existen beneficios perdidos en la fijación de documentar?

?

Answer 1

1. Se puede utilizar .on() de la misma manera:

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

   Yes, that will work.

2. quiero usar esto en vez de live() dado mejoras en el rendimiento.

   Hay no ventajas de rendimiento de la utilización de ese fragmento de código en lugar de utilizar live(), live() como sí se une eventos realizados en el documento, y en jQuery 1.7, llamadas en vivo on detrás de las escenas.

3. ¿Y hay algún beneficio perdido al adjuntar al documento?

   La desventaja de la vinculación a document es que el evento debe atravesar toda la lista de antepasados ​​antes de que se maneje; esto, as pointed out in the jQuery documentation, es la ruta más lenta posible. Será mejor manejar el evento antes, conectando el controlador a un elemento más cercano al origen del evento.

Answer 2

es posible y "este" es el selector de clics, no el documento.

es mejor que te conectes al elemento padre más cercano de tu selector. Cuando haces clic en '# selector1', el evento se dispara hasta el elemento del controlador de eventos, aquí: documento.

Cuantas más capas, más acciones. Además, si entre selector1 y el documento hay otro controlador de eventos de clic, se puede interceptar con event.stopPropagation();, y nunca llegar al controlador de eventos "documento".

puede verificar el evento no autorizado "intercepción" in this fiddle.