Proper use of .on method in Jquery

Question

I really liked the .live method as it was straightforward and essentially not much different than your standard event handler.

Alas, it was deprecated and I'm left with the .on method.

Basically, I'm loading and dynamically loading content that I'll need the same event handler triggered on. Rather than add the event handler twice or however many times. .live was great for this, but .on has replaced it and I just can't seem to get it to work.

check this code:

jQuery('#who_me').live('click', function(){
        alert('test123');
        return false;
    });

should be the same as:

jQuery('#who_me').on('click', function(){
        alert('test123');
        return false;
    });

but when I replace content with the .html method after an ajax call only the live method works.

Can anyone clear this up for me?

The context when using .live was `document`, therefore the selector for .on should be `document` — Kevin B, Feb 27 '12 at 22:31
You should specify which version of jQuery you are now using. — Evik James, Feb 27 '12 at 22:37
The [doco for `.live()`](http://api.jquery.com/live/) has been updated to explain exactly how to convert to `.on()` (also says how to convert to `.delegate()` in case you are using a version of jQuery older than 1.7 but >= 1.4.3). — nnnnnn, Feb 27 '12 at 23:03

jfriend00 · Accepted Answer · 2012-02-27T22:39:18.913

You aren't using .on() correctly. This is a better implementation if the #who_me object comes and goes.

jQuery(document.body).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

The selector you use in the jQuery object for .on() must be an object that is present at the time you install the event handler and never gets removed or recreated and is either the object you want the event installed on or a parent of that object. The selector passed as the 2nd argument to .on() is an optional selector that matches the object you want the event on. If you want .live() type behavior, then you must pass a static parent object in the jQuery object and a selector that matches the actual object you want the event on in the 2nd argument.

Ideally, you put a parent object in the jQuery object that is relatively close to the dynamic object. I've shown document.body just because I know that would work and don't know the rest of your HTML, but you'd rather put it closer to your actual object. If you put too many dynamic event handlers on the document object or on document.body, then event handling can really slow down, particularly if you have complicated selectors or handlers for frequent events like click or mousemove.

For reference, the 100% equivalent to your .live() code is this:

jQuery(document).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

.live() just installs all its event handlers on the document object, and uses event bubbling to see all the events that happen on other objects in the page. jQuery has deprecated .live() because it's better to NOT install all your live event handlers on the document object (for performance reasons). So, pick a static parent object that is closer to your object.

Wow. You answered my question and then some. I can see why it makes sense from a performance standpoint and really to give a developer more options to use .on instead of .live now. Thanks for being so concise! — Rooster, Feb 27 '12 at 22:45

kendaleiv · Answer 2 · 2012-02-27T22:37:27.130

2

jQuery(document).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

should be the equivalent of jQuery.live('#who_me', function() { // code here });

edited Feb 27 '12 at 22:37

answered Feb 27 '12 at 22:32

kendaleiv

5,793
3
28
38

score 2 · Answer 3 · answered Feb 27 '12 at 22:32

2

The context when using .live was document, therefore the selector for .on should be document

$(document).on("click","#who_me",function(){...});

answered Feb 27 '12 at 22:32

Kevin B

94,570
16
163
180

score 2 · Answer 4 · answered Feb 27 '12 at 22:33

The way you're using on, it's basically a replacement for bind, rather than live. With on, as with live and delegate, you can use event delegation, but you must supply a specific containing element (as was always the case with delegate).

At the simplest level, this can be document. In this case, the handler will function exactly as live would have:

jQuery(document).on('click', '#who_me', function() {
    alert('test123');
    return false;
});

It would be better, however, to find the closest element to contain the elements that will exist. This gives performance gains.

jQuery('#some_el').on('click', '#who_me', function() {
    alert('test123');
    return false;
});

+1 because you show an optimized version. The document selector, from my understanding, causes a lot of extra traversal to find the right element. — random_user_name, Dec 26 '13 at 23:36

score 1 · Answer 5 · answered Feb 27 '12 at 22:32

Nope.

$( '#who_me' ).live( 'click', function () { ... });

is the same as:

$( document ).on( 'click', '#who_me', function () { ... });

However, you usually don't want to bind to much handlers to the document object. Instead you bind to the nearest static ancestor (of #who_me, in this case). So:

$( '#wrapper' ).on( 'click', '#who_me', function () { ... });

where #wrapper is an ancestor of #who_me.

score 0 · Answer 6 · answered Feb 27 '12 at 22:37

To replace .live() you need one more parameter int he .on() call.

// do not use! - .live(events, handler)
$('#container a').live('click', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});

// new way (jQuery 1.7+) - .on(events, selector, handler)
$('#container').on('click', 'a', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});

Source: http://www.andismith.com/blog/2011/11/on-and-off/

Proper use of .on method in Jquery

6 Answers6

Linked