Detailed explanation of the use of .die() and .live() in jQuery

Many developers know jQuery's .live() method. Most of them know what this function does, but they don't know how to implement it, so it is not so comfortable to use. And they have never heard of the .die() method of unbinding .live()event. Even if you are familiar with this, are you aware of .die()?

What is .live()
The .live method is similar to .bind(), except that it allows you to bind events to DOM elements. You can Events are bound to elements that don't yet exist in the DOM. Take a look at the following example:

For example, when a user clicks a link, you want to be prompted 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 the more general .bind(). The code below and above are equivalent to the above implementation.

$(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.

$(&#39;body&#39;).append(&#39;<p><a href="...">Check it out!</a></p>&#39;);

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 nodes of the page, so we just Replace .bind() with .live():

$(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.

How .live() 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.

So when you click on an element, the click event will be passed up the DOM tree until it reaches the root node. The trigger of 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. 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:

$('a').die();

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

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

To be more specific, if the method name has been defined, 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 );

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

$(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 option is matched and the binding of .live() is released, but in fact, $('a.no-alert') does not have a binding, so jquery cannot find any binding to remove it, and it will not It worked.
What’s worse is this:

$(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 would suggest a new method of .die() implementation that would provide a backwards-compatible modal 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 pay attention to .delegate() and .undelegate(), They can replace .live() and .die(), and they are closely related.

The above is the detailed content of Detailed explanation of the use of .die() and .live() in jQuery. For more information, please follow other related articles on the PHP Chinese website!