jquery Live () method usage instructions

Today spent a long time in the whole people center function, encountered a lot of problems, first of all, Ajax cross-domain problem. Then the jquery-bound event does not work. Spent a long time debugging add Baidu, finally, finally resolved, this deliberately with jquery live method AH. Here is an article in the blog Park, write very clear.

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.

The code is as follows	Copy Code
$ (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.

The code is as follows	Copy Code
$ (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.

The code is as follows	Copy Code
$ (' body '). Append (' Check it out! ');

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 nodes of the page, so we use. Live () to replace. Bind ():

The code is as follows	Copy Code
$ (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 () is OK. 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:

The code is as follows	Copy Code
$ (' a '). Die ();

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.

The code is as follows	Copy Code
$ (' a '). Die (' click ');

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

The code is as follows	Copy Code
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:

The code is as follows	Copy Code
$ (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:

The code is as follows	Copy Code
$ (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 it. 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

Duplicate binding description

Using the Live () method of jquery to bind events, there are times when a duplicate binding occurs, such as when a button is clicked and the event that the button binds is executed n times

Workaround: Use the Die () method to unbind the previously bound event on this element before the live () method is bound, and then bind the new event through the Live () method.

The code is as follows	Copy Code
First through the Die () method, and then through Live () binding $ ("#selectAll"). Die (). Live ("Click", Function () { Event Run code });

Introduction to the Die () method:

The code is as follows	Copy Code
Die ([Type], [fn]) <span style= "White-space:normal" > </SPAN>

Overview
JQuery 1.3 is new. This approach is exactly the opposite of live.

If no parameters are taken, all the bound live events will be removed.

You can unlock custom events that are registered with live.

If the type parameter is provided, the corresponding live event is removed.

If the second parameter function is also specified, only the specified event handler is moved.