javascript - 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

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.