Break down jQuery's event operations on related controls

Today, I suddenly became interested in his events. I have encountered these events before, but I have not sorted them out. I just want to get them out today.

For control events, jQuery has provided a wide range of methods, including binding, binding, and triggering. This morning, ara' can see how it can be used by daguo.

It is very convenient to bind events to jQuery, including bind, live, And one. It also helps you to separate some common events, such as The onclick event of the Control. When binding an onclick event, you only need

 
 

  
  
$("#testButton").click(function() {  
  
  
    alert("I'm Test Button");  
  
  
}); 
 
 

In this way, The onclick event is bound to the testButton and the alert statement is executed. We can also use $ ("# testButton"). click (); to trigger this onclick event. Everything is very OK. The above is a bit sb. Next let's take a look at the cancellation event. JQuery has the unbind method, specifically used to cancel the binding, that is, to cancel the event. In the preceding example, you should use: $ ("# testButton "). unbind ("click"); well, it looks very good. If you have two click events, you can also use unbind ("click", fnName) to delete the binding of a specific function. Why is there a way to cancel a specific function? Let's take a look at the example below. We will find that javascript events are exactly the same as C # events, and event binding is superimposed + =) instead of overwriting.

 
 

  
  
VarEat=Function(){
  
  
Alert ("I want to eat ");
  
  
}
  
  
 
  
  
VarPayMoney=Function(){
  
  
Alert ("pay first ");
  
  
}
  
  
 
  
  
JQuery (document). ready (function (){
  
  
$ ("# TestButton"). click (Eat );
  
  
$ ("# TestButton"). bind ("click", PayMoney );
  
  
});
 
 

Through the above example, we found that "I want to eat" will pop up and "pay first" will pop up, indicating that it is bound through onclick + = fn. Let's modify the ready method:

 
 

  
  
jQuery(document).ready(function() {  
  
  
           $("#testButton").click(Eat);  
  
  
           $("#testButton").unbind();  
  
  
           $("#testButton").bind("click", PayMoney);  
  
  
       }); 
 
 

Another error occurred. If you click the button this time, you will only execute PayMoney and Eat. If you put unbind () behind bind, this button will not work. But what if I want to remove the bound PayMoney method? In this case, we should write:

 
 

  
  
jQuery(document).ready(function() {  
  
  
          $("#testButton").click(Eat);  
  
  
          $("#testButton").bind("click", PayMoney);  
  
  
          $("#testButton").unbind("click", PayMoney);  
  
  
      }); 
 
 

Hey, it's actually the same as bind, but next you'll see a bug I don't know.) Let's get a close-up experience.

 
 

  
  
：<input id="testButton" type="button" value="Test Button" onclick="Eat();" /> 
  
  
<script type="text/javascript"> 
  
  
        jQuery(document).ready(function() {  
  
  
            $("#testButton").unbind("click", Eat);  
  
  
            $("#testButton").unbind();  
  
  
            $("#testButton").bind("click", PayMoney);  
  
  
        });  
  
  
</script> 
 
 

Let's guess what it will show? Dinner? Pay? The answer is Eat-> PayMoney, ah !!! I canceled the binding and deleted the specific binding. Why is the Eat still executed? The reason for this is to look at the jQuery class library. I guess it only deletes the events bound with JQuery. What should we do at this time? Fortunately, jQuery has many methods, one of which is attr, which operates the attributes of Dom elements. We use attr to eliminate click events on input. $ ("# TestButton "). attr ("onclick", ""); in this way, you can clear the onclick event. Remember, because attr is an attribute of an element, you must write "onclick" instead of "click" here, because click is a simplified method encapsulated by jQuery. Okay, the binding is here. Let's make a scenario. You can remember: One day, Lao Ying, Lao Zhao, and Lao Chen went out for dinner. They were full and had enough drinks and were ready to pay. At this time

 
 

  
  
:<Head> 
  
  
 
  
  
<Script Type="Text/javascript" Src=Jquery-1.2.6.min.js"></Script> 
  
  
 
  
  
<Script Type="Text/javascript"> 
  
  
 
  
  
VarPayMoney=Function(Name ){
  
  
Alert (name + ": My treat today, I will pay ");
  
  
}
  
  
 
  
  
JQuery (document). ready (function (){
  
  
$ ("# JeffreyPay"). attr ("onclick ","");
  
  
$ ("# JamesPay"). attr ("onclick ","");
  
  
 
  
  
$ ("# JeffreyPay"). click (function (){
  
  
Alert (".... You cannot swipe your card here ");
  
  
});
  
  
 
  
  
$ ("# JeffreyPay"). click (function (){
  
  
PayMoney ("Chen da ");
  
  
});
  
  
$ ("# JamesPay"). bind ("click", function (){
  
  
Alert (".... Forgot to bring your wallet ");
  
  
});
  
  
$ ("# JamesPay"). bind ("click", $ ("# DlyingPay"). attr ("onclick "));
  
  
});
  
  
</Script> 
  
  
 
  
  
</Head> 
  
  
<Body> 
  
  
<Input Id="JeffreyPay" Onclick="PayMoney ('zhao Shuai ');" Type="Button" Value="Lao Zhao pays" /> 
  
  
<Input Id="JamesPay" Type="Button" Onclick="PayMoney ('olde ');" Value="Regular payment" /> 
  
  
<Input Id="DlyingPay" Type="Button" Onclick="PayMoney ('chen da ');" Value="Old Chen pays" /> 
  
  
</Body> 
 
 

The above content is original and should not be used in evil places. In fact, there are still many bugs in binding events. You can modify the above effect a little and you will know, such as automatic execution and binding failure.

1. JQuery calls the WCF Service to pass JSON objects
2. Several common methods required for learning jQuery
3. Construct an ASP. NET Website using XML + XSLT + CSS + JQuery
4. Use jQuery and PHP to build an Ajax-Driven Web Page
5. Notes for calling WCF using jQuery