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 ?

?

Solution 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.

Solution 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.

Comments

[Andy]

right cool thanks. i suspected as much :) So basically, I just need to add a selector closer to where my .on( selectors are right ? i.e. something like $('.closer-parent-container').on('click', '#selector1, #selector2, .class1', ?

[Matt]

@Andy: Yes, exactly that. Obviously the element you call .on() on must be in the DOM at the time you call .on().

[Andy]

@Matt - super! cleared up that for me in a jiff :) I'll select your answer when the timer allows me :) Thanks heaps!

[Andy]

@Matt - just lastly. Is there any way to easily deal with $(this) in the sense I want to target #selector1, #selector2, .class1 as opposed to the .closer-parent-container ? using $(this) now selects .closer-parent-container instead of what I want - #selector1, #selector2, .class1 ?

[Matt]

@Andy, that shouldn't be the case; see jsfiddle.net/DDu3z/1. If you check the console upon clicking any of the elements, you'll see the correct output being reported. Can you post the code you're using?

[Andy]

@Matt - brain fart. Yep, totally with it now :) I need coffee :P - thanks again!