The binding of event handlers are the most confusing part of jQuery for many developers working on jQuery projects. Many of them unsure of which is better to use. In this article we will see the main differences between Bind and Live methods in jQuery.
Bind() Method
The bind method will only bind event handlers for currently existing items. That means this works for the current element.
Example
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication137.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$('P').bind('click', function () {
alert("Example of Bind Method");
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<P>Test for bind and live</>
</form>
</body>
</html>
Now Press F5 to execute it.
![JQuery-bind-method.jpg]()
Now you add a paragraph tag with body. The following shows the added paragraph tag code.
$('body').append('<p>Adding Future items</p>')
Now the code looks like the following code:
<script type="text/javascript">
$(document).ready(function () {
$('P').bind('click', function () {
alert("Example of live method");
e.preventDefault();
});
$('body').append('<p>Adding Future items</p>');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<P>Test for bind and live</>
</form>
</body>
Now press F5 to execute it.
![JQuery-bind-method-with future-items.jpg]()
When you click on the Adding Future items text, it will not show any message; that means it will not work for future items. That means this works for new and old elements. Or Live() adds events to the selector you pass in (which you haven't here) and continues to look at the DOM as nodes are inserted / removed.
The preceding method will work fine with currently existing items. It will not work with future items. To solve this problem you can use the Live method.
Live() Method
The bind method can bind event handlers for currently existing items or future items.
Example
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication137.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$('P').live('click', function () {
alert("Example of live method");
e.preventDefault();
});
$('body').append('<p>Adding Future items</p>');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<P>Test for bind and live</>
</form>
</body>
</html>
Now press F5 to execute it and click on the "Adding Future items".
![JQuery-Live-method.jpg]()