jQuery $.live and $.on methods
In this tutorial, I will explain how $.on method has replaced the deprecated jQuery live method from the version 1.7 of jQuery.
Replacement of jQuery $.live by $.on method
This is how $.live method was used to attach event handlers to the current or future specified elements:
$(“div”).live(“click”, function_name)
Where div is the specified element where you can use other selector or elements like a paragraph, span, a CSS class/id etc. You could use multiple events in the $.live method as well, for example:
$(“div”).live(“click mouseenter”, function_name)
This is how you can attach single or multiple events by $.on method to get the same functionality as in $.live method, first attaching a single event:
$(document).on("click", "div", function(){
//Code to execute here
});
To attach a handler to the multiple events, just separate it by spaces:
$(document).on("click mouseenter", "div", function(){
//Code to execute here
});
See the following examples of $.live and getting the same result done by using the $.on jQuery method.
An example of jQuery live method with a div element
In this example, a div element is created with a basic style. As you click the div element or take the mouse out of div, an alert will be shown. See the demo online:
See online demo and code
This is how $.live method is used in the demo:
$('.divcls').live('click mouseleave', function(){
alert("Click or mouseenter event occurred in div!");
});
At the click and mouseleave events of the div element, an alert is triggered by using the $.live method. Also, notice that in the <head> section, the jQuery library version is 1.7.
Same example as above by using the $.on method of jQuery
Now, the same output as in above example, trigger an alert at the click and mouseleave events of the div by using the $.on method.
See the demo and code by clicking the link below:
See online demo and code
You can see the same result on the demo page. This is how the $.on method is used:
$(document).on("click mouseleave", ".divcls", function(){
alert("Click or mouseenter event occurred in div!");
});
An example of $.live method with current and future elements
As mentioned in the definition of live jQuery method, you could attach handlers to the current as well as future elements in the $.live method. For example, your web page is creating new div or table rows without reloading the web page and you want to have new elements same functionality as the current elements.
See an example online where a button is given along with a div element as web page loads.
Click on the button for creating more div elements. After that, click on the main div or other div elements created by clicking the button. All should trigger the same alert.
See online demo and code
You can see, as you click on the child div elements created by clicking the button, it triggered the same alert as the main div. This is how $.live method is used in that example:
<script>
$(document).ready(function(){
$(".divcls").live("click", function(){
alert("The div is clicked!");
});
$('.btncls').click(function(){
$("<br><div class='divcls'>A new div / child of main div</div>").insertAfter(".divcls");
});
});
</script>
Now see the same result by using the $.on method while using the latest jQuery library.
A demo of current and future elements with $.on method
The same example with the similar result except this time $.on method is used.
See online demo and code
You can see, as you click on the child div elements created by clicking the button, it triggered the same alert as the main div. This is how $.on method is used in that example:
<script>
$(document).ready(function(){
$(document).on("click", ".divcls", function(){
alert("The div is clicked!");
});
$('.btncls').click(function(){
$("<br><div class='divcls'>A new div / child of main div</div>").insertAfter(".divcls");
});
});
</script>
Conclusion
From 1.7 version of jQuery, the $.live method is deprecated from the library and replaced by $.on method. However, the $.on method is much more than that to attach handlers. Not only it replaces the $.live method but it is the preferred method over $.delegate and $.bind methods.
To learn more about $.on method of jQuery, a complete tutorial is written here.