ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery にバインドされたイベントが複数のインスタンス コードをトリガーします

Jquery にバインドされたイベントが複数のインスタンス コードをトリガーします

高洛峰
高洛峰オリジナル
2017-01-04 14:09:581747ブラウズ

「on」関数を使用してイベントを新しいボタンにバインドします。このイベントは複数回トリガーされます。

<html> 
<head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>码上飘</title> 
  <script src="/FrontStyle/js/jquery-1.11.2.min.js" type="text/javascript"></script> 
  <script> 
    $(function(){ 
      $(&#39;#btn1&#39;).click(function () { 
        $(&#39;#btnBind&#39;).on(&#39;click&#39;,function () { 
          alert(123); 
        }); 
      }); 
    }) 
  </script> 
</head> 
<body> 
<input id="btn1" type="button" value="确认" /> 
<input id="btnBind" type="button" value="绑定按钮" /> 
</body> 
</html>

上記のコードのように、「btn1」ボタンを複数回クリックすると、クリックイベントが可能な限り「btnBind」ボタンにバインドされ、その回数だけ on がトリガーされます。バウンド。

解決策:

1. 一度だけバインドしたい場合は、まず「オフ」にしてバインドを解除し、次に「オン」にします。

$(&#39;#btnBind&#39;).off(&#39;click&#39;).on(&#39;click&#39;,function () { 
  alert(123); 
});

2. 一度実行した後にUnbind()を実行します

$(&#39;#btn1&#39;).click(function () { 
    $(&#39;#btnBind&#39;).on(&#39;click&#39;,function () { 
      alert(123); 
    });<BR>     $("#btnBind").unbind("click") 
});

上記のバインドイベントトリガーのサンプルコードはすべてエディターが共有した内容ですので、ご参考になれば幸いです。 PHPの中国語サイトです。

Jquery にバインドされたその他のイベントについては、複数のインスタンス コードをトリガーする関連記事がある PHP 中国語 Web サイトに注目してください。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。