Solution for Deprecated jQuery live() Method

July 31, 2013 Development, jQuery

In a theme I downloaded recently from ThemeForest, I received an error with the .live() method. It turns out that .live() has been deprecated since version 1.7 of jQuery but was fully removed in version 1.9.

Since I was using the latest version, which is 1.10.2, switching to the .on() method would restore functionality in the theme. Both jQuery methods are used to attach handlers to an event. For example, hiding the pop-up when its background container is clicked.

A quick example of before and after code can be found below.

jQuery:

// With the .live() method
$('#lightbox').live('click', function()
{ 
     $('#lightbox').hide(200);
});

// Switched to the .on() method
$(document).on('click', '#lightbox', function()
{ 
     $('#lightbox').hide(200);
});

The main difference, aside from the function name, is the inclusion of the selector in the method arguments. Our selector is #lightbox in the above example. Our event, or user action, is a mouse click on the element.

Please see below for the path this method has taken from .live() to .delegate() to, currently, on().

jQuery:

$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+

Now the pop-up functionality is restored and we’ll no longer need to use the .live() method.

Let's Talk About Your New Website

View Portfolio Contact Today