!!! Event bindings in jquery are recommended for use with. Delegate () or Live ()

the difference between. bind (),. Live (), and. Delegate () in jquery Reference: Http://www.jb51.net/article/27309.htm DOM Tree  First, it is helpful to visualize the DOM tree of a HMTL document. A simple HTML page looks like this. event Bubbling (also known as event propagation)When we click on a link, it triggers the Click event of the link element, which raises any execution of the function on the click event that we have bound to the element.
Copy CodeThe code is as follows:
$ (' a '). bind (' click ', function () {alert (' That tickles! ')})
Therefore, a click action triggers the execution of the alert function.  The Click event is then propagated to the root of the tree, broadcast to the parent element, and then to each ancestor element, as long as the clicked event on one of its descendant elements is triggered, and the event is passed to it. In the context of manipulating the DOM, document is the root node. Now we can easily describe the differences between. bind (),. Live (), and. Delegate ().
. Bind ()The code is as follows:$ (' a '). bind (' click ', function () {alert (' that tickles! ');})
This is the simplest way to bind. jquery scans the document to find all the $ (' a ') elements and binds the alert function to each element's Click event.
. Live ()The code is as follows:$ (' a '). Live (' click ', function () {alert (' That tickles! ')})
jquery binds the alert function to the $ (document) element and uses ' click ' and ' a ' as arguments. Whenever an event bubbles onto the document node, it checks to see if the event is a click event, and whether the target element of the event matches the CSS selector of ' a ', and if so, executes the function.
The live method can also be bound to a specific element (or "context") rather than document, like this:The code is as follows:$ (' A ', $ (' #container ') [0]). Live (' click ', function () {alert (' That tickles! ')})
. Delegate ()The code is as follows:$ (' #container '). Delegate (' A ', ' click ', function () {alert (' That tickles! ')})
The jquery scan document looks for $ (' #container ') and binds the alert function to $ (' #container ') using the Click event and the CSS selector ' a ' as a parameter. Whenever an event bubbles to $ (' #container '), it checks to see if the event is the click event, and whether the target element of the event matches the CSS selector. If the results of both checks are true, it executes the function.
It can be noted that this process is similar to. Live (), but it binds handlers to specific elements rather than to the root of document. The savvy JS ' er may have made the conclusion that $ (' a '). Live () = = $ (document). Delegate (' A '), is that right? Well, no, not exactly.
Why. Delegate () is better than. Live ()
For several reasons, people are often more inclined to opt for the delegate method of jquery than the live method. Consider the following example:The code is as follows:$ (' a '). Live (' click ', function () {blah ()});
Or
$ (document). Delegate (' A ', ' click ', function () {blah ()});
The latter is actually faster than the former, because the former first has to scan the entire document to find all the $ (' a ') elements and save them as jquery objects. Although the live function only needs to pass ' a ' as a string argument for subsequent judgment, the $ () function does not "know" that the method being linked will be. Live ().

On the other hand, the delegate method only needs to find and store the $ (document) element.
One way to avoid this problem is to call live that is bound outside of (document). Ready () so that it executes immediately. In this way, it runs before the DOM gets populated, so it doesn't look for elements or create jquery objects.
flexibility and chain capabilityThe live function is also quite confusing. Think of it as being chained to the set of $ (' a ') objects, but it actually works on the $ (document) object. For this reason, it can try to link the method to itself in a way that scares the dead. In fact, what I want to say is, with $.live (' a ',...) This form is a global jquery approach, and the live approach makes more sense. only CSS selectors are supportedFinally, there is a big drawback to the live approach, which is that it can only operate on a direct CSS selector, which makes it very inflexible. For more information about the disadvantages of CSS selectors, see the Exploring JQuery. Live () and. Die () article. Update: Thanks to Hacker news on Pedalpete and the Ellsass in the comments below remind me to join the next section. Why Choose. Live () or. Delegate () instead of. Bind ()After all, bind seems to be more explicit and straightforward, isn't it? Well, there are two reasons why we prefer to choose delegate or live rather than bind:1. To attach handlers to DOM elements that might not yet exist in the DOM. Because bind is directly binding handlers to individual elements, it cannot bind handlers to elements that do not yet exist on the page. 2. If you run $ (' a '). Bind (...) and the new link is added to the page via Ajax, your bind handler is not valid for these newly added links. Live and delegate, on the other hand, are bound to another ancestor node, so it is valid for any element that is present or future within that ancestor element. 3. Alternatively, to attach a handler to a single element or to a small group of elements, listen for events on the descendant elements instead of looping through and attaching the same function to the 100 elements in the DOM one after the other. Attaching a handler to a (or a small group) ancestor element rather than attaching the handler directly to all the elements on the page provides a performance benefit. Stop SpreadingThe last reminder I want to do is related to event propagation. Typically, we can terminate the execution of a handler function by using an event method like this:The code is as follows:
$ (' a '). bind (' click ', Function (e) {
E.preventdefault ()
E.stoppropagation ()}
)
However, when we use the live or delegate method, the handler is not actually running, and the function does not run until the event bubbles to the element that the handler is actually bound to. And so far, our other handler functions from. bind () have already run.

!!! Event bindings in jquery are recommended for use with. Delegate () or live ()