Differences between click (), bind (), live (), and delegate () in Query

Click (), bind (), and live () are all the methods used to execute events. They have some differences before. We should select as needed when using these methods.

1. The click () method is a frequently used click Event method:
Copy codeThe Code is as follows:
$ ("A"). click (function (){
Alert ("hello ");
});

When you click <a>, the output is hello.

2. The click () method is a simple method of the bind () method. In bind (), all JavaScript event objects of jQuery, such as focus, mouseover, and resize, can be passed in as type parameters.Let's take a look at an example in the jQuery document:
Copy codeThe Code is as follows:
Var message = "left ";
$ ("A"). bind ("click", function (){
Alert (message );
Return false;
}); Var message = "right ";
$ ("A"). bind ("contextmenu", function (){
Alert (message );
Return false;
});

In the above Code, whether left-click or right-click <a> the output is always "right ". To solve this problem, we can pass the message to the bind () method as the data parameter, as follows:
Copy codeThe Code is as follows:
Var message = "left ";
$ ("A"). bind ("click", {msg: message}, function (e ){
Alert (e. data. msg );
Return false;
}); Var
Message = "right ";
$ ("A"). bind ("contextmenu", {msg: message}, function (e ){
Alert (e. data. msg );
Return false;
});

In this way, when <a> is left clicked, "left" is output. When <a> is right clicked, "right" is output ".

It can be seen that we can use the click () method in general. When we need to deal with the above situation, we need to use the bind () method.

3. live () attaches an event handler function to all matching elements, even if the element is added later.As follows:
Copy codeThe Code is as follows:
$ ("Div. live"). bind ("click", function (){
Alert ("success ");
});

When you click the div whose class is live, the output is "success ". If a new element is added, as shown in the following figure:
Copy codeThe Code is as follows:
$ ("<Div class =" live "href =" # "> live </div>"). appendTo ("body ");

When the above method is used to click the label whose class is live, it will not be executed. The reason is that this element is added after bind () is called, and the live () method is used to enable the elements added later to execute corresponding events, as shown below:
Copy codeThe Code is as follows:
$ ("Div. live"). live ("click", function (){
Alert ("success ");
});

In this way, when we click the label whose class is live, if this a label is added later, we can also output "success" as usual ". As for the reason, I will not describe it here. This article mainly compares the differences between several methods.

Finally, let's take a look at the delegate () method. I haven't used this method so far. It should be in 1.4.2.
One disadvantage of the live () method is that it does not support chained writing:
Copy codeThe Code is as follows:
$ ("# Test"). children ("a"). live ("mouseover", function (){
Alert ("hello ");
});

The preceding statement is not output. We can use delegate () to write it as follows:
Copy codeThe Code is as follows:
$ ("# Test"). delegate ("a", "mouseover", function (){
Alert ("hello ");
});

In this way, we can output the expected results normally. This article summarizes the click (), bind (), live (), and delegate () methods, which are not explained in detail, I only hope it will be helpful for you in your specific use.