Jquery .live('click') vs .click()?

There might be times when you explicitly want to only assign the click handler to objects which already exist, and handle new objects differently. But more commonly, live doesn't always work. It doesn't work with chained jQuery statements such as.

There might be times when you explicitly want to only assign the click handler to objects which already exist, and handle new objects differently. But more commonly, live doesn't always work. It doesn't work with chained jQuery statements such as: $(this).children().

Live('click',doSomething); It needs a selector to work properly because of the way events bubble up the DOM tree.

All objects that would be associated with the . Click must exist when you set the event. Example: (in pseudo code) the append can be $("body").append() for example append('...'); $("div.

Something"). Click(function(){...}); append('...'); Click works for foo but doesn't work for bar Example2: append('...'); $("div. Something").

Live("click",function(){...}); append('...'); click works for both foo and bar With . Live('click'... you can dynamicaly add more objects after you created the event and the clicking event will still work.

Cool, this is why I am using .live. I'm curious to know whether there are any benefits the other way round. – kalpaitch Feb 9 at 11:36 1 won't vote down, but this wasn't really the question that was asked.

Nice explaination though. – Thomas Clayson Feb 9 at 11:40 actually this exactly answers the question that led me here. I now understand why my .

Click fails and my . Live("click",...) works - I have an ordering issue where I haven't created the element that . Click needs at the time that it is called, and hence my event isn't getting called, whereas .

Live doesn't care about the ordering, and hence works. – Rob Nov 20 at 20:45.

Always use click if you not dynamically add elements. Live works by adding an event listener to the document root and listens for bubbled up events. An alternative is delegate, which works the same, but binds the event handler to the specified element.

This way, the event has not to bubble up the whole DOM and is caught earlier.

Live happens by capturing the event when it's bubbled all the way up the DOM to the document root, and then looking at the source element. Click happens by capturing the event on the element itself. So if you're using live, and one of the ancestor elements is hooking the event directly (and preventing it continuing to bubble), you'll never see the event on your element.

Whereas normally, the element nearest the event (click or whatever) gets first grab at it, the mix of live and non-live events can change that in subtle ways. For example: HTML: Click me or me or me I'm two levels in so am I I'm two levels in AND my parent interferes with live me too JavaScript: jQuery(function($) { $('span'). Live('click', function() { display("live caught a click!"); }); $('#catcher').

Click(function() { display("Catcher caught a click and prevented live from seeing it. "); return false; }); function display(msg) { $(""). Html(msg).

AppendTo(document. Body); } }); Live copy I'd recommend using delegate over live when you can, so you can more thoroughly control the scope; with delegate, you control the root element that captures the bubbling event (e.g. , live is basically delegate using the document root as the root). Also, recommend avoiding (where possible) having delegate or live interacting with non-delegated, non-live event handling.

.live() is used if elements are being added after the initial page load. Say you have a button which gets added by an AJAX call after the page gets loaded. This new button will not be accessible using .click(), so you'll have to use .

Live('click').

From what I understand the key difference is that live() keeps an eye open for new DOM elements that match the selector you are working on, whereas click() (or bind('click')) attach the event hook and are finished. Given that alot of your code is loaded asynchronously, using live() will make your life alot easier. If you don't know exactly the code you are loading but you do know what kind of elements you will be listening to, then using this function makes perfect sense.In terms of performance gains, one alternative to using live() would be to implement an AJAX callback function to re-bind the event hooks.

Var ajaxCallback = function(){ $('*'). Unbind('click'); $('. Something').

Bind('click', someFunction); $('. SomethingElse'). Bind('click', someOtherFunction); } You will need to keep proper track of your event hooks and make sure this function is rebinding the proper events.

P.s. Ajax methods .get(), .post(), .load() and .ajax() all let you specify a callback function.

As 'live' will handle events for future elements that match the current selector, you may choose click as you don't want that to happen - you only want to handle the current selected elements. Also, I suspect (though have no evidence) that there is a slight efficiency using 'click' over 'live'. Lee.

If you need simplify code then live is better in the most cases. If you need to get the best performance then delegate will always better than live. Bind (click) vs delegate isn't so simple question (if you have a lot of similar items then delegate will be better).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.