Of Stack

jQuery cancels specific click events

  • 2021-01-11 01:53:39
  • OfStack

This article illustrates the jQuery implementation of canceling specific click events. To share with you for your reference, as follows:

As we all know, jQuery can bind to the same event multiple times, and each of the bound events can be executed. The problem is that in the dynamically generated DOM, we bind two different click (A, B) to one element. When the append element is used, all elements are bound to B again... This will cause the B event to multiply exponentially when the last click is made.

Fortunately, jQuery provides an elegant way to cancel click in certain namespaces. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> No title page </title>
  <script src="jquery/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){
      $("#divTest").click(function(){
        alert(" Official event. ");
      });
    });
    function bindEvent(){
      for(var i=0;i<3;i++){
        $("#divTest").bind("click.test",function(){
          testEvent();
        });
      }
    }
    function testEvent(){
      alert(" Test events ");
    }
    function ignoreMultiEvent(){
      $("#divTest").unbind("click.test").bind("click.test",function(){
        testEvent();
      });
    }
  </script>
</head>
<body>
  <div id="divTest" style="height: 163px;text-align:center;line-height:163px;width: 500px; background-color: #0000FF;">
     Let me test it 
  </div>
  <input id="Button2" type="button" value=" For the above DIV The binding 3 Secondary test event " onclick="bindEvent()" />
  <input id="Button1" type="button" value=" Keep the formal event,   Cancels the bound multiple test event and rebinds 1 Secondary test event  " onclick="ignoreMultiEvent()" />
</body>
</html>

Readers who are interested in more jQuery related content can check the special features of this site: jQuery Drag Effects and Techniques Summary, jQuery Expansion Techniques Summary, jQuery Common Classical Effects Summary, jQuery Animation and Effects Usage Summary, jquery Selection Method Summary and jQuery Common Plugins and Usage Summary

I hope this article described to everyone jQuery program design is helpful.

Related articles: