Event delegation in jQuery, how to do it?

Question

In JavaScript i used to use event delegation like this :

someDiv.addEventListener('click', function(evt){
    if(evt.target.id == "#someChild"){
       // Do something..
    } else if(evt.target.id == "#anotherChild"){
       // Do something else..
    }
}, false);

What's the equivalent of this in jQuery? i know about .on() but how to use it in event delegation ? i mean is this how is it done :

someDiv.on('click, '#someChild, #anotherChild", function(evt){
      if($(this).is("#someChild")){ 
           // Do something..
      } else if($(this).is("#anotherChild")){
           // Do something else ..
      }      
});

But wouldn't it be just the same as in vanilla JavaScript ? I want to know if there's a better way to achieve it. And if this is the only way, what's the benefit of jQuery way over JS one ?

Well for one, `addEventListener` doesn't work in IE below IE9. — j08691, Sep 01 '12 at 18:00

score 1 · Answer 1 · answered Sep 01 '12 at 18:00

1

With jQuery you'd do it like this:

function onButtonClick(e) {
  //this = the button that was clicked

}

$(document.body).on('click','button',onButtonClick)

You can read the docs here

answered Sep 01 '12 at 18:00

Martin Jespersen

23,663
6
52
66

score 1 · Answer 2 · edited Sep 01 '12 at 18:09

1

You could start here, if this element is created dynamically, and not there on page load

$(document).on('click', '#someChild', function(evt) {
   // Do something..      
});

If the element is created before the page is rendered then this will work

         <input type="button" onclick="fnClickfn();" id="xxx" />

EDIT:

Oh, also .on only works in later versions on jQuery (I think 1.6 and above), so make sure you aren't using an old version that would require .live and .die.

edited Sep 01 '12 at 18:09

0x499602D2

87,005
36
149
233

answered Sep 01 '12 at 18:02

Scott Selby

9,126
12
49
91

you could replace $(document) with anything that is a parent of the div that is dynamically created, but the parent can not be dynamically created , so document usually works – Scott Selby Sep 01 '12 at 18:05

Felix Kling · Accepted Answer · 2012-09-01T18:10:39.483

You can do:

$(someDiv).on('click', '#someChild, #anotherChild', function(){
    if(this.id ==='someChild'){ 
       // Do something..
    } else if(this.id === 'anotherChild'){
       // Do something else ..
    }      
});

Or create two event handlers if you do different things for both elements anyway:

$(someDiv).on('click', '#someChild', function(){
     // Do something..    
}).on('click', '#anotherChild', function() {
     // Do something else ..
});

But wouldn't it be just the same as in vanilla JavaScript ? I want to know if there's a better way to achieve it. And if this is the only way, what's the benefit of jQuery way over JS one ?

Of course it's basically the same, jQuery just makes your life a bit easier by providing a wrapper around the DOM API, but it does not change how the DOM works.

There is a difference though, namely that this will refer to the element matched by the selector, not to the element the handler is bound to.

In general, the advantage is that the jQuery code is more cross-browser compatible than using addEventListener.

Event delegation in jQuery, how to do it?

3 Answers3

Linked