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.