The. Live () and Die () in jquery

Translated original address: http://www.alfajango.com/blog/exploring-jquery-live-and-die/

Many developers know about JQuery's. Live () method, most of them know what the function does, but do not know how it is implemented, so it is not so comfortable to use. And they never heard of that. The. Die () method of the. Live () event that has been unbound. Even if you're familiar with this, but you realize. Die ()?

what is. Live ()

The. Live method is similar to. bind (), except that it allows you to bind events to DOM elements, and you can bind events to elements that do not already exist in the DOM, and look at the following example:

Let's say when a user clicks on a link and wants to prompt them to leave the site.

123456

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

Note that. Click () is just a simple way to implement more general. Bind (), and the code below is equivalent to the above implementation.

123456

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

But now add a link to the page via JavaScript.

1	$(‘body‘).append(‘<div><a href="...">Check it out!</a></div>‘);

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

123456

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

Now if you add a new link to the page, the bindings can also run.

how Live () works

The magical Place behind live () is that it does not bind events to the elements you select, but is actually bound to the DOM tree's heel node (in the case of $ (document)) and is passed as a parameter in element.

Then when you click on an element, the Click event is passed up on the DOM tree until it reaches the root node. The trigger for the. Click () event is already created at the root node by. Live (). This triggering method will first detect if the target being clicked matches the selector of the. Live () call. So the above example will check if the clicked element matches the $ (' a ') in Live (), and if it matches, then the binding method executes.

Because no matter what you click within the root node, the. Click () event of the root node is triggered, and this check occurs when you click on any element that is added to the root node.

all. Live () can. Die ()

If you know. Bind (), then you certainly know. Unbind (). So,. Die () and. Live () are similar relationships. To get in touch with the above bindings (you don't want the user to click the link when the dialog pops up), we do this:

1	$(‘a‘).die();

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

1	$(‘a‘).die(‘click‘);

More specifically, if you have defined a method name, you can unbind the specified method.

123456789101112

specialAlert = function() {    alert("You are now leaving this site");    returntrue;}$(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. Only the element selectors used in the. Live () method can be used, for example, not as follows:

12345678910

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

　　

The. Die () event appears to match the target selection and release the. Live () binding, but in fact, $(' A.no-alert ') does not have a binding, so jquery cannot find any bindings to remove and it will not work.

What's worse is this:

12345678910111213

$(document).ready( function() {     $(‘a,form‘).live( ‘click‘, function() {         alert("You are going to a different page");         returntrue;    });});// 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 recommend A. Die () execution of the new method, which can provide a backward-compatible tone of behavior. Maybe if I had the time, I would recommend that the jquery core development team accept my suggestions and make changes in the next release, hoping for a little more of these methods I just wrote, including the optional context parameter, which allows you to customize the node that the event attaches to, not the root node.

If you want to get more information and examples, you can check jquery. Live () and. Die (). Documentation

Also note the following. Delegate () and. Undelegate (), they can replace. Live () and. Die (), which are closely related.

Category: JQuery

The. Live () and Die () in jquery