What is. Live ()
The live method is similar to. bind (), which, in addition, allows you to bind events to DOM elements, and you can bind events to elements that do not yet exist in the DOM, and look at the following example:
For example, when the user clicks on the link and wants to be prompted that they are leaving the site.
Copy Code code as follows:
$ (document). Ready (function () {
$ (' a '). Click (function () {
Alert ("You are now leaving this site");
return true;
});
});
Note that. Click () is simply a simple way to achieve a more general. Bind (), and the following code corresponds to the above implementation.
Copy Code code 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 through JavaScript.
Copy Code code as follows:
$ (' body '). Append (' <div><a href= "..." >check it out!</a></div> ");
However, when the user clicks on that link, the method will not be invoked because the link does not exist when you bind the click event to all <a> nodes of the page, so we use. Live () to replace. Bind ():
Copy Code code 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 bindings can also run.
. how Live () works
The magical thing about live () is that it does not bind events to the elements you select, but is actually bound to the nodes of the DOM tree (in the case of $ (document)), and is passed as a parameter in the element.
Then when you click on an element, the Click event is passed up on the DOM tree until the root node is reached. The trigger for this. Click () event is already created on the root node by. Live (). This trigger method will first detect if the target being clicked matches the selector of the. Live () call. So the above example checks to see if the clicked element matches the $ (' a ') in the $ (' a '). Live (), and if so, the bound method executes.
Because no matter what you click on 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 be. Die ()
If you know. Bind (), then you must know. Unbind (). So,. Die () and. Live () are similar relationships. To get in touch with the above bindings (the pop-up dialog box does not want the user to click on the link), we do this:
Copy Code code as follows:
More specifically, if there are other events that are bound and need to be preserved, such as hover or others, you can only unbind the click event.
Copy Code code as follows:
$ (' a '). Die (' click ');
More specifically, if you have already defined a method name, you can unbind the specified method.
Copy Code code 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 the
$ (' a '). Die (' click ', Specialalert);
On the question of. Die ()
When using these functions, the. Die () method has a disadvantage. You can use only the element selectors that are used in the. Live () method, for example, you cannot write as follows:
Copy Code code 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'll do nothing
$ (' A.no-alert '). Die ();
The. Die () event appears to match the target selection and unbind the. Live (), but in fact, there is no binding for $ (' A.no-alert '), so jquery cannot find any bindings to remove, and it won't work.
What's worse is the following:
Copy Code code as follows:
$ (document). Ready (function () {
$ (' A,form '). Live (' click ', function () {
Alert ("You are going to a different page");
return true;
});
});
Neither of these would work
$ (' a '). Die ();
$ (' form '). Die ();
Only this would work
$ (' A,form '). Die ();
How to fix. Die ()
In my next article, I will suggest a new method of. Die (), which provides a backward-compatible tone of behavior. Maybe if I had the time, I would have suggested that the jquery core development team accept my suggestions and make changes in the next release, hopefully a little bit more of the methods I've just written, including optional context parameters that allow custom events to be attached to nodes instead of root nodes.
If you want more information and examples, you can check the jquery. Live () and. Die () Documents
Also note the following. Delegate () and. Undelegate (), they can replace. Live () and. Die (), they are closely related.
