How live method works in jQuery. Why it does not work in some cases. When to use livequery

Following code has been tested with jQuery 1.3.2 version .

The super popular live method was added to jQuery 1.3 . It works just great. Except when it does not work. As per the documentation this method does not work in following cases: blur, focus, mouseenter, mouseleave, change, submit .

How binding works in jQuery

 
$('a').click(function(){
console.log('clicked');
});

In above case click event is bound to all the links in the document. jQuery stores such binding information as ‘data’ attribute to the element. I regularly look at data attribute while debugging. This is how you can do it.

 
$('a').data('events');

If a new link is added then that link will not get this click behavior. To get around to this problem you can use live method.

Trying out live event

 
$('a').live('click',function(){
console.log('clicked');
});

If you execute following code to inspect if an event is bound to link , you will get undefined.

 
$('a').data('events'))

Why is that. In the previous section we saw that all the events bound to an element are stored at the data attribute of that element. Well, live is different. live events are not bound to the element directly. They are bound to the top level document. You can verify this by trying out this code 

 
jQuery.data(document, 'events').live;
output => Object

How does live method work

live methods do not set anything on the element directly. All the event handlers are set at the document level. It means that in order for live methods to work, event bubbling is required. If you don’t know what event bubbling is then read here . It also means that event should not be stopped while it is progagating to document. If event propagation is stopped then event handlers bound at the document level will never know about that event and live method will fail.

Let’s see how stopping the event propagation will fail live method.

 

 
Languages 

Java
 

Javascript
 



$('p').live('click',function(e){ 
console.log('p was clicked'); 
});

If you click on ‘Java’ or ‘Javascript’ you get a message on the console. live is working great. Now let’s stop the event propagation when event reaches to div.

 
$('p').live('click',function(e){ 
console.log('>>>>p was clicked'); 
});

$('#parent').click(function(e){ 
console.log('stopping progpagation'); 
e.stopPropagation();
});

Now you will notice that live is no more working.

live does not work when event bubbling is not supported

In the previous section you saw that when event does not bubble up to the document then live fails. It means that all the events that do not bubble will not work. Which means that events like blur, focus, mouseenter, mouseleave, change and submit which do bubble in IE will not work in IE. However note that these events will continue to work in Firefox.

 




$("#lab1a").live('change',function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("#lab1b").text(str);
});

Above code will work in firefox but it will not work in IE.

Here is an example of an event that does not work in IE: onchange event.

DOM models suggest that onchange event should bubble .

msdn documentation clearly says that onchange event does not bubble .

make all the live method problems go away

To recap live method will not work in following cases:

  • live method works on event propagation, if an event is stopped while it is bubbling then live will not work.
  • IE does not support bubbling for certain events. live method on those events will not work in IE.

There is a way to get around to both the problems.

Brandon Aaron developed livequery plugin which was finally merged into jQuery as live method. livequery plugin solves both the problems listed above and the code works in IE too.

First step is to include this plugin

Now try this code.

 
$('p').livequery('click',function(e){ 
  alert('>>>>p was clicked'); 
}); 

$('#parent').click(function(e){ 
  alert('stopping progpagation'); 
  e.stopPropagation(); 
});

$("#lab1a").livequery('change',function () { 
var str = ""; 
$("select option:selected").each(function () { 
str += $(this).text() + " "; 
}); 
$("#lab1b").text(str); 
});

 




 
Languages 

Java
 

Javascript

If you click on ‘Java’ or ‘Javascript’ you will get proper response even though event propagation is being stopped. Also even though change
event do not bubble in IE, above code works in IE.

livequery works because livequery ,unlike live, method does not do binding at the document level. livequery does binding at the element level. You can find that out by running following code.

 
$('p').data('events');

Above code will produce result if you are using livequery. Above code will not produce any result if you are using live method.

The key piece of code in the plugin that makes all this work is

 
// Create a timeout to check the queue and actually run the Live Queries
$.livequery.timeout = setTimeout($.livequery.checkQueue, 20);

Every 20 milliseconds livequery runs all the bindings defined in livequery and then binds the matched element with the event.

By understanding the internals of how live and livequery are implemented, now you can choose to use livequery in certain cases where live will not work. Also it helps to understand how live actually works.