I read this article before.The difference between jquery's. BIND (),. Live (), and. Delegate ()In this article, I feel that I have fully understood. Live () and. delagate () until I have encountered another problem and found that there are still some omissions.
First, I would like to add some knowledge and briefly talk about the differences between the two:
. Live ()
$('a').live('click', function() { alert("That tickles!") });
Jquery binds the alert function to the $ (document) element and uses 'click' and 'A' as parameters. Any time as long as there is an eventBubbleOn the document node, it checks whether the event is a click event and whether the target element of the event matches the 'A' CSS selector. If both are, the function is executed.
The live method can also be bound to a specific element (or context) rather than a document, like this:
$('a', $('#container')[0]).live(...);
. Delegate ()
$('#container').delegate('a', 'click', function() { alert("That tickles!") });
Jquery scans the document for $ ('# iner') and binds the alert function to $ ('# iner') using the Click Event and the 'A' CSS selector as parameters. Whenever an event bubbles to $ ('# iner'), it checks whether the event is a click event and whether the target element of the event matches the CCS selector. If both checks are true, It executes the function.
It can be noted that this process is similar to. Live (), but it binds the handler to a specific element rather than a document. The Savvy JavaScript 'er may come to the conclusion that $ ('A '). live () ==$ (document ). delegate ('A'), is that true? Well, no, not exactly.
Why. Delegate () is better than. Live ()
For several reasons, people prefer to use jquery's delegate method instead of the live method. Consider the following example:
$ ('A '). live ('click', function () {blah ()}); // or $ (document ). delegate ('A', 'click', function () {blah ()});
Speed
The latter is actually faster than the former, because the former first needs 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 parameter for subsequent judgment, the $ () function does not know that the method to be 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 bound outside of $ (document). Ready () so that it will be executed immediately. In this way, it runs before the DOM obtains the padding, so it does not search for elements or create jquery objects.
Flexibility and chain capabilities
The live function is also confusing. Think about it, It is chained to the $ ('A') object set, but it actually works on the $ (document) object. For this reason, it can try to chain methods to itself in a way that is frightening. In fact, what I want to say is: $. Live ('A ',...) As a global jquery method, the live method is more meaningful.
Only the CSS selector is supported.
Finally, the live method has a major drawback, that is, it can only operate on direct CSS selectors, which makes it very inflexible.
For more information about the disadvantages of CSS selector, see the article listing ing jquery. Live () and. Die.
The above is an introduction I found online. live () and. if you have a general understanding of the difference between delegate () and delegate (), let's take a look at the following application scenarios:
<! Doctype> <HTML>The above code binds two events in a connection and redirects to different pages. (In a real project, this example is obviously a bug. However, when multiple people develop a project at the same time, this situation may still occur. Every developer binds events based on the ID or class, ). OK ,what kind of application scenario is that when a user clicks on the connection, it will jump to ca.html? Is it cb.html, that is, the live event or the delegate event first?
Well, the answer is: The delegate event, because delegate is bound to the DIV, while live is bound to the document. When the event is bubbling, the delegate event is triggered first.
References:
Http://kb.cnblogs.com/page/94469/
Http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
