suchen

Heim >Web-Frontend >js-Tutorial >jQuery bricht spezifisches Klicken auf event_jquery ab

jQuery bricht spezifisches Klicken auf event_jquery ab

WBOY
WBOYOriginal
2016-05-16 15:13:141480Durchsuche

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>

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Entdecken Sie „angularjs+requirejs“, um die On-Demand-Laderoutine_AngularJS vollständig zu implementierenNächster Artikel：Entdecken Sie „angularjs+requirejs“, um die On-Demand-Laderoutine_AngularJS vollständig zu implementieren

In Verbindung stehende Artikel

Mehr sehen