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

jQuery Web Development Front 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>

David Meador

Published on 16-Dec-2017 18:21:51

Previous Page Print Page