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

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.

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 accomplish.

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.

The code is as follows:

$('body').append('e388a4556c0f65e1904146cc1a846beed632822ac9277025ec149ceea8685596Check it out!16ef26f8b7ea0fc89bdf90e275a93e5d94b3e26ee717c64999d7867364b1b4a3');

However, when the user clicks that link, the method will not be called, because that link when you bind the click event to all3499910bf9dac5ae3c52d5ede7383485 The node does not exist yet, so we replace .bind() with .live():

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

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 (not wanting the dialog box to pop up when the user clicks the link), we do this:

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.

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.

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

About .die()
When using these functions, the .die() method will have a disadvantage. Only the element selector used in the .live() method can be used. For example, it cannot be written like the following:

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 it matches the target option and unbinds .live(), but in fact, $('a.no-alert') does not have a binding, so jquery If you can't find any binding and remove it, it won't work.
What’s worse is the following:

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 provides a backwards-compatible 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 Introduction to the use of jQuery's .live() and .die(). For more information, please follow other related articles on the PHP Chinese website!