Teach with us

What is the difference between jQuery.bind() and jQuery.live() methods in jQuery?

jQueryWeb DevelopmentFront End Technology

jQuery.bind() method

The bind() method in jQuery attaches one or more event handlers for the selected elements.
Note: The jQuery bind() method deprecated in jQuery.

Example

You can try to run the following code to learn how to work with bind() method in jQuery:

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").bind("click", function(){
        alert("Hello World!");
    });
});
</script>
</head>
<body>

<div>Click me! I am an alert!</div>

</body>
</html>

jQuery.live() method

The live( type, fn ) method binds a handler to an event (like click) for all current - and future - matched element. It can also bind custom events.

Here is the description of all the parameters used by this method:

  • type: An event type.
  • fn: A function to bind to the event on each of the set of matched elements

Example

You can try to run the following code to learn how to work with live() method.

Note: The live() method deprecated in jQuery 1.7, and removed in version 1.9. So, if you want to run the live() method, use the jQuery version below 1.7 as in the following code:

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<script>
$(document).ready(function() {
    $("button").live("click", function() {
        $("p").slideToggle();
    });
});
</script>
</head>
<body>
<p>This is demo text.</p>
<p>This is another text.</p>
<button>Click to toggle</button>
<br><br>
<div>The live() method deprecated in jQuery 1.7, and removed in version 1.9. So, if you want to run the live() method</div>
</body>
</html>
raja
David Meador
Updated on 09-Dec-2019 11:01:57

Previous Page Print Page Next Page  
Advertisements