jQuery bricht spezifisches Klicken auf event

jQuery bricht spezifisches Klicken auf event_jquery ab

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 15:13:14

Original

1527 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierungsmethode zum Abbrechen eines bestimmten Klickereignisses. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Wie wir alle wissen, kann jQuery dasselbe Ereignis mehrmals binden und jedes gebundene Ereignis kann ausgeführt werden. Hier kommt das Problem. Im dynamisch generierten DOM binden wir zwei verschiedene Klicks (angenommen A und B) für ein bestimmtes Element. Beim Anhängen des Elements werden alle Elemente erneut an B gebunden ... Dies führt zum Finale Wenn Sie darauf klicken, wird das B-Ereignis verdoppelt.

Glücklicherweise bietet uns jQuery eine sehr elegante Möglichkeit, Klicks unter einem bestimmten Namensraum abzubrechen.

<!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>无标题页</title>
  <script src="jquery/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){
      $("#divTest").click(function(){
        alert("正式事件。");
      });
    });
    function bindEvent(){
      for(var i=0;i<3;i++){
        $("#divTest").bind("click.test",function(){
          testEvent();
        });
      }
    }
    function testEvent(){
      alert("测试事件");
    }
    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;">
    点我进行测试
  </div>
  <input id="Button2" type="button" value="为上面的DIV绑定3次测试事件" onclick="bindEvent()" />
  <input id="Button1" type="button" value="保留正式事件， 取消已绑定的多次测试事件，再绑定一次测试事件 " onclick="ignoreMultiEvent()" />
</body>
</html>