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?

Answer 1

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.

Answer 2

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/

Answer 3

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;
});

Answer 4

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

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

Answer 5

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.

Answer 6

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

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