Unified Event Handling API in jQuery – .live() Vs .on()

This entry is part 2 of 3 in the series Unified Event Handling in jQuery

We have been reading about the unified event handling model that brings the event handling under two main methods, i.e. .on() and .off() methods. In the first post of the Unified Event Handling Series, we compared the .on() method with the .bind() method and saw how the .on() method replaces the .bind() method. In the second post, we did similar exercise for the .on() and the .delegate() methods.

The last set of event handling methods that get deprecated in jQuery 1.7 are .live() and .die() methods. Like the other old event handling methods, these methods get replaced by the new set of .on() and .off() methods.

The .live() Vs .on() Method

We read that the .live() method is used for the DOM elements which get injected into the DOM after page loading. The new element might be loaded by an AJAX action or a DOM manipulation. These new elements are not identified by the .bind() method. So, for such dynamically added elements, the .live() method was used.

In fact, the .live() was one of the least recommended method because of its performance issues. The problem is that the .live() method uses the event bubbling approach of JavaScript to reach the target element from the document itself. Probably, this is the reason why an equivalent .delegate() method was introduced in jQuery 1.4.3.

Comparing the generalised syntax of .live() and .on() method, we find that the .live() version of the .on() method also attaches itself to document and selector is an additional parameter.

$(selector).live(events, data, handler);

$(document).on(events, selector, data, handler); 

Scrutinizing the syntax, the events argument can be a space separated list of event type names. The data is an optional argument and can be omitted. The handler, obviously, is the function to handle the event.

$("a.refulz").live("click", function(){ alert("You clicked Refulz anchor element"); });

$(document).on("click", "a.refulz", function(){ alert("You clicked Refulz anchor element "); });  

Drawbacks of .live() Method

The use of .live() method was not recommended even before the arrival of .on() method in jQuery 1.7. The .delegate() method was suggested alternative introduced in jQuery 1.4.3.

Chaining of methods is a very useful feature of jQuery but the .live() method doesn’t support chaining of methods.

Since, the .live() event is attached to the document, event handling is very slow. In addition, the jQuery tries to fetch all the elements identified by the selector before actually making call to .live() method.

The .off() replaces .die() method

The .die() method complements the .live() method. It is used to remove all the elements previously attached by using the .live() method. However, if you use .unbind() method without any arguments, then it also removes any attached .live() methods.

// Unbind all live click events on all span elements

$("span").die( "click" );

$(document).off( "click", "span" ); // Equivalent to the above statement

// Unbind live click event from span element in a container

$("#container").off( "click", "span" );

//Unbind previously bound handler

$("span").die("click", liveHandler);

$(document).off("click", "span", liveHandler); 

In the example, the liveHandler() is the method bound by the .live() method to the click event of the span elements.

With this post, we conclude the Unified event handling series. However, we will talk about another interesting event handling method in jQuery.

Series Navigation<< Unified Event Handling API in jQuery – .delegate() Vs .on()<< Unified Event Handling API in jQuery – .bind() Vs .on()

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>