Jquery's. Live () and. Die ()

Http://www.alfajango.com/blog/exploring-jquery-live-and-die/

Many developers know jquery's. Live () method. Most of them know what this function is doing, but they do not know how it is implemented, so it is not so comfortable to use. They have never heard of the. Die () method for unbinding. Live () events. Even if you are familiar with this, do you realize. Die?

What is. Live ()

. The live method is similar. BIND (). In addition, it allows you to bind events to DOM elements. You can bind events to elements that do not exist in the Dom. Take a look at the following example:

For example, when a user clicks a link and wants to prompt that they are leaving the site.

$(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. BIND (). The following code is equivalent to the above implementation.

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

But now you can add a link to the page through JavaScript.

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

However, when the user clicks the link, the method will not be called, because the link does not exist when you bind the click event to all <A> nodes on the page, so we use it. live () replacement. BIND ():

$(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 can also run.

How. Live () Works

. The magic behind live () is that it does not bind events to the selected elements, but is actually bound to the nodes of the DOM tree (in this example, $ (document )), instead, it is passed in element just like a parameter.

When you click an element, the click event will be passed up on 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 first checks whether the clicked Target matches the selector called by. Live. Therefore, in the above example, we will check whether the clicked element and $ ('A '). $ ('A') in live () matches. If yes, the binding method is executed.

No matter what you click in the root node, the. Click () event of the root node will be triggered. This check will happen when you click any element added to the root node.

All. Live () can be. Die ()

If you know. BIND (), you must know. Unbind (). The relationship between. Die () and. Live () is similar. In order to contact the above binding (the dialog box is displayed when the user does not want to click the link), we do this:

$('a').die();

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

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

If you have defined a method name, you can unbind the specified method.

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 );

About. Die ()

When using these functions, the. Die () method has a disadvantage. Only the element Selector Used in the. Live () method can be used. For example, it cannot be written 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();

　　

. The die () event seems to have matched the target option and removed it. live () binding, but in fact, $ ('a. no-alert ') does not exist. Therefore, jquery does not find any binding to remove it.

Worse, the following:

$(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 method for. Die () execution, which can provide a backward compatible tone. Maybe if I have time, I suggest the jquery core development team accept my suggestions and modify them in the next release. I hope to add more methods I just wrote, including optional context parameters, nodes attached to custom events are allowed, rather than the root node.

For more information and examples, see the document of jquery. Live () and. Die ().

Pay attention to. Delegate () and. undelegate (). They can replace. Live () and. Die (). They are closely linked.