Converting From jQuery’s .live() to .on()

If you’ve ever updated the DOM’s contents manually using JavaScript (ie. with the response from an AJAX call), and then wanted to manipulate this updated content, you’ve no doubt needed to use the jQuery .live() function.

As of version 1.7 of jQuery however, the .live() function has been deprecated. If you’re using a version of jQuery newer than this, or if you’ve recently updated, your code will still work, but it’s recommend you change over to use .on() instead.

So, how do we do this? Let’s imagine that have the following code that incorporates .live():

Note that the primary selector, in our case ‘#outerDiv’, is an element that must be present when the page loads. The element that we manually added to the DOM and that we’re wishing to interact with then goes as the second parameter of the call to .on().