jQuery .on() with multiple selectors in event delegation?

Question

I have using .on() in jQuery 1.7 and wondered whether it is possible to attach multiple selectors at a time for elements that have been injected onto a page. Previously, I was using live() - but it's obvious why I want to move given performance improvements.

Can you use .on() in the manner like:

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

And are there any benefits lost in attaching to document ?

?

Answer 1

1. Can you use .on() in the manner like:

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

   Yes, that will work.

2. I want to use this instead of live() given performance improvements.

   There are no performance advantages of using that code snippet as opposed to using live(), as live() itself binds events to the document, and in jQuery 1.7, live calls on behind the scenes.

3. And are there any benefits lost in attaching to document?

   The downside to binding to document is that the event must traverse the entire list of ancestors before it is handled; this, as pointed out in the jQuery documentation, is the slowest possible route. It will be better to handle to event sooner, by attaching the handler to an element closer to the source of the event.

Answer 2

it's possible and "this" is the clicked selector, not the document.

you better off attaching to the closest parent element of your selector. When you click on '#selector1', the event bubble up to the event handler element, here: document.

The more layers, the more actions. Moreover, if between selector1 and document there is another click event handler, it can be intercepted with event.stopPropagation();, and never reach the "document" event handler.

you can check the rogue event "interception" in this fiddle.