Difference Between live() and bind() Methods in jQuery
Last Updated :
11 Apr, 2022
Before looking at the differences between jQuery live() and bind() methods, let us briefly understand both methods.
live(): This method is used to attach one or more event handlers to the selected element. We specify a function for each event so that when that event occurs, the associated function will execute. This method works for future elements too. We will understand this when we discuss the difference between these two methods.
Syntax:
$(selector).live(event,function)
Parameters:
- event: It specifies the event which you want to attach with the selector.
- function: It is the function that will be executed when a particular event occurs.
Example: We are attaching a click event to the “p” tag. And when we click on any “p” tag, the function associated with the click event gets executed and the color of all “p” tags changes to red.
HTML
<!DOCTYPE html>
<head>
<script src=
type="text/javascript">
</script>
</head>
<body>
<div class="a">
<p>Hello geeks</p>
<div class="b">
<p>Hey Geeks</p>
</div>
<p>Hello geeks</p>
</div>
<script>
$('p').live('click',function () {
$("p").css('color','red')
})
</script>
</body>
</html>
|
Output:
live() method
Note: This method is removed in the jQuery 1.9 version, please use the on() method.
bind(): This method is also used to attach an event to a selector and specify a function that will be executed when the event occurs. This method works only for the present element.
Syntax:
$(selector).bind(event,function)
Parameter:
- event: It specifies the event which you want to attach with the selector.
- function: It specifies the function which will be executed when the particular event occurs.
Example: The following example only demonstrates the bind() method and its execution.
HTML
<!DOCTYPE html>
<head>
<script src=
type="text/javascript">
</script>
</head>
<body>
<h1>Hello Geeks</h1>
<script>
$('h1').bind('click',function () {
$("h1").css('color','blue')
})
</script>
</body>
</html>
|
Output:
simple bind() example
Difference between live() and bind() methods: Both live() and bind() method is almost the same. Both are used to attach events to the element. In live() method, event handlers attached to the element and will work for the present as well as future elements.
Explanation: Assume, We have a single “p” tag on our page and we have attached a click event to that. Now whenever we click on the “p” tag, the function associated will be executed. If we append another “p” tag to our HTML using the append() method and now if we click on this “p” tag, the event occurs and the associated function will execute. It means the live() method works for future elements too.
On the other hand, the bind() method works only for the present element.
Explanation: We have a “p” tag, and we have attached click event on this tag from both live() and bind() methods.
We are also adding another “p” tag to our page at runtime (future “p” tag). When we click the first “p” tag, we see two alert boxes, one from both methods. But when we click on the future “p” tag, only the live() method gets executed because the bind() method does not work for future elements.
Example:
HTML
<!DOCTYPE html>
<head>
<script src=
type="text/javascript">
</script>
</head>
<body>
<p>Hello</p>
<script>
$('p').live('click',function () {
alert('live')
})
$('p').bind('click',function () {
alert('bind')
})
$('body').append('
<p>Future p tag</p>
')
</script>
</body>
</html>
|
Output:
Let us see the differences in a tabular form -:
| |
live() Method |
bind() Method |
| 1. |
The live() method is used to attach one or more than one event handlers for selected elements |
The bind() method is helpful in attaching one or more than one event handlers for selected elements |
| 2. |
It helps to specify a function to run when the events occur. |
It is used to specify a function to run when the event occurs. |
| 3. |
Its syntax is -:
$(selector).live(event,data,function)
|
Its syntax is -:
$(selector).bind(event,data,function,map)
|
| 4. |
It takes two parameters function and event. |
It takes two parameters an event and a function |
| 5. |
It was first introduced in jQuery version 1.7. |
It was first introduced in JQuery version 3.0 |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...