jQuery bricht spezifisches Klicken auf event

jQuery bricht spezifisches Klicken auf event_jquery ab

WBOY

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

Original

1482 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>

Nach dem Login kopieren

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der Drag-Effekte und Fähigkeiten von JQuery“, „Zusammenfassung der Fähigkeiten der jQuery-Erweiterung“ , „Zusammenfassung der allgemeinen klassischen JQuery-Spezialeffekte“, „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung des JQuery-Selektors“ und „jQuery Allgemeine Plug-Ins und Nutzungsübersicht》

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.