Skip to content
Related Articles

Related Articles

Improve Article

Difference Between live() and bind() Methods in jQuery

  • Last Updated : 05 Aug, 2021
Geek Week

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>
    <!-- jQuery library -->
    <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>
    <!-- jQuery library -->
    <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>
    <!-- jQuery library -->
    <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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :