Search jQuery

jQuery Forum

Differences between .on() and .live()

in Using jQuery • 10 years ago

How can we move to .on(), when .on() only binds to dom that is in the page currently. It does not bind to dom that are added later on.

Replies(6)

dsvick

Re: Differences between .on() and .live()

10 years ago

Replacing live() with on() requires the use of delegating the events. Read the paragraph on this page (http://api.jquery.com/on/) that starts with "Direct and Delegated Events".

Essentially what you're doing is placing the handler on an ancestor element and letting it bubble up from the descendant. An example from that page:

$("#dataTable tbody").on("click", "tr", function(event){

means that you are binding the event to the tbody of the table, however since events "bubble up", if a descendant element is clicked the event will eventually reach the tbody. If the handler has been bound like above it will then fire when the event gets there. The code above also filters it so that if the event did not originate from a tr, it will be ignored.

Hope that cleared it up a little

Dave

ashrafuzz..

Re: Differences between .on() and .live()

10 years ago

Hi dsvick,

Thanks for the detail reply. I am sot sure, but guessing something like the following,

If a new tr elements is added in the dom then the event on that tr will bubble up to tbody and tbody handles the event. Is that right?

realtebo

Re: Differences between .on() and .live()

10 years ago

At this page: http://api.jquery.com/on/

the doc says:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

Probably I cannot understand what you mean with delegate event, but using 'delegate()' method work fine.

'TABLE#rowContainer').delegate("INPUT.manualQuantity", 'change', function (event){

saveQuantity(event);

})

...

So my question now change in:

what's the differnces beetween on, live and delegate ?!!?!

dsvick

Re: Differences between .on() and .live()

10 years ago

ashrafuzzaman:

You're correct, when the tr is clicked the event will bubble up to the tbody, then to the table, and so on. It can be handled at any point and that is what on() lets you do.

realtebo:

All three of those methods do almost the same thing, there is some differences with propagation and where the events are actually handled but essentially they all have the same effect. The biggest difference is that, while not actually deprecated, live() and delegate(), have been replaced with on() and that is the recommended method.

realtebo