Jquery にバインドされたイベントが複数のインスタンスコードをトリガーします-jsチュートリアル-php.cn

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

高洛峰

リリース： 2017-01-04 14:09:58

オリジナル

1706 人が閲覧しました

「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 サイトに注目してください。