Introduction to the use of jQuery's .live() and .die()_jquery

What is .live()
The .live method is similar to .bind(), except that it allows you to bind events to DOM elements. You can bind events to the DOM. For an element that doesn’t exist yet, take a look at the following example:

Let’s say you want to indicate when a user clicks on a link that they are leaving the site.

Copy code The code is as follows:

$(document).ready( function() {
$('a').click( function() {
alert("You are now leaving this site");
return true;
});
});

Note that .click() is just a simple method to implement the more general .bind(). The code below and above are equivalent to the above implementation.

Copy code The code is as follows:

$(document).ready( function() {
$('a').bind( 'click', function() {
alert("You are now leaving this site");
return true;
});
} );

But now add a link to the page via javascript.

Copy code The code is as follows:

$('body').append('Check it out!

');

However, when the user clicks on that link, the method will will not be called because the link does not exist when you bind the click event to all nodes on the page, so we replace .bind() with .live():

Copy code The code is as follows:

$(document).ready( function() {
$('a ').live( 'click', function() {
alert("You are now leaving this site");
return true;
});
});

Now if you add a new link to the page, the binding will also work.

.live() How it works The magic behind
.live() is that it does not bind the event to the elements you selected, but actually binds it to the DOM tree. With the node ($(document) in the example), it is passed in the element like a parameter.

Then when you click on an element, the click event will be passed up the DOM tree until it reaches the root node. The trigger for this .click() event has been created by .live() on the root node. This trigger method will first check whether the clicked target matches the selector called by .live(). So in the above example, it will be checked whether the clicked element matches $('a') in $('a').live(). If it matches, the binding method will be executed.

Because no matter what you click within the root node, the .click() event of the root node will be triggered, and this check will occur when you click on any element added to the root node.

All .live() can be .die()
If you know .bind(), then you definitely know .unbind(). Then, .die() and .live() have a similar relationship. In order to access the above binding (do not want the dialog box to pop up when the user clicks the link), we do this:

Copy code The code is as follows :

$('a').die();

More specifically, if there are other events that are bound and need to be retained, such as hover or others, you can Only unbind the click event.

Copy code The code is as follows:

$('a').die('click');

To be more specific, if the method name has been defined, you can unbind the specified method.

Copy code The code is as follows:

specialAlert = function() {
alert(" You are now leaving this site");
return true;
}
$(document).ready( function() {
$('a').live( 'click', specialAlert );
$('a').live( 'click', someOtherFunction );
});
// then somewhere else, we could unbind only the first binding
$('a ').die( 'click', specialAlert );

Questions about .die()
When using these functions, the .die() method has a disadvantage. You can only use the element selector used in the .live() method. For example, you cannot write it like this:

Copy code The code is as follows:

$(document).ready( function() {
$('a').live( 'click', function() {
alert(" You are now leaving this site");
return true;
});
});
// it would be nice if we could then choose specific elements
// to unbind , but this will do nothing
$('a.no-alert').die();

.die() event looks like the target selection is matched and released .live() binding, but in fact, $('a.no-alert') does not have a binding, so jquery cannot find any binding to remove it, and it will not work.
What’s worse is the following one:

Copy the code The code is as follows:

$( document).ready( function() {
$('a,form').live( 'click', function() {
alert("You are going to a different page");
return true;
});
});
// NEITHER of these will work
$('a').die();
$('form').die ();
// ONLY this will work
$('a,form').die();

How to fix .die()

In my next article, I will suggest a new way of executing .die() that can provide a backwards-compatible mood behavior. Maybe if I have time, I will suggest that the jQuery core development team accept my suggestions and make modifications in the next release. I hope to have more of the methods I just wrote, including optional context parameters, allowing custom nodes to be attached to events, and Not the root node.

If you want more information and examples, you can check the documentation of jQuery .live() and .die().

Also note that .delegate() and .undelegate(), they can replace .live() and .die(), they are closely related.