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

This article mainly introduces the differences among click (), bind (), live (), and delegate () in Query. For more information, see click (), bind (), and live, we should select these methods as needed.

1. The click () method is a frequently used click Event method:

The Code is as follows:

$ ("A"). click (function (){
Alert ("hello ");
});

When you click, output 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:

The 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 it is left-click or right-click, the output is always "right ". To solve this problem, we can pass the message to the bind () method as the data parameter, as follows:

The 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 we left click, the output is "left"; when right click, the output is "right ".

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:

The Code is as follows:

$ ("P. live"). bind ("click", function (){
Alert ("success ");
});

When you click p whose class is live, the output is "success ". If a new element is added, as shown in the following figure:

The Code is as follows:

$ ("

Live

"). 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:

The Code is as follows:

$ ("P. 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:

The 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:

The 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.