26

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 ?

?

horgh
  • 17,918
  • 22
  • 68
  • 123
Andy
  • 18,723
  • 12
  • 46
  • 54

2 Answers2

28

  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.

Matt
  • 74,352
  • 26
  • 153
  • 180
  • 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',` ? – Andy Nov 14 '11 at 17:22
  • 1
    @Andy: Yes, exactly that. Obviously the element you call `.on()` on *must* be in the DOM at the time you call `.on()`. – Matt Nov 14 '11 at 17:23
  • @Matt - super! cleared up that for me in a jiff :) I'll select your answer when the timer allows me :) Thanks heaps! – Andy Nov 14 '11 at 17:25
  • @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` ? – Andy Nov 14 '11 at 17:36
  • @Andy, that shouldn't be the case; see http://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? – Matt Nov 14 '11 at 17:40
  • @Matt - brain fart. Yep, totally with it now :) I need coffee :P - thanks again! – Andy Nov 14 '11 at 17:43
1

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.

roselan
  • 3,755
  • 1
  • 20
  • 20