javascript - 複数回のアタッチにもかかわらず、Jqueryイベント関数は1回トリガーします

Question

これどうやってするの

html

   <button id="onclickpopupmenu">Test</button>
   <button id="popupmenuok"></button>

JavaScript:

$("#onclickpopupmenu").bind("click",function(){

  alert("this can execute multiple times")
  $("#popmenuok").bind("click",function(){
    alert("this has to be triggered only once eventhough the parent event trigger multiple times")
  })
})

私を助けてください...

Answer 1

ハンドラーを 1 回だけバインドします。

var popupmenuBound = false;

$("#onclickpopupmenu").bind("click",function(){
  alert("this can execute multiple times");
  if (!popupmenuBound) {
    $("#popupmenuok").bind("click",function(){
      alert("this has to be triggered only once eventhough the parent event trigger multiple times");
    });
    popupmenuBound = true;
  }
});

Answer 2

必要なものを潜在的に解釈する方法がいくつかあります。

1 つ目は、最初のボタンでの複数回のクリックです。これにより、2 つ目のボタンで単一の (しかし永続的な (すべてのクリックに反応する)) イベント ハンドラーが生成されます。これを行うには、次のようにします。

$('#onclickpopupmenu').click(function() {
    // alert
    $('#popupmenuok').off('click').on('click', function() {
        // alert
    });
});

jsFiddle デモ

2 つ目は、最初のボタンを複数回クリックすることです。クリックするたびに、2 つ目のボタンで 1 回限りのイベント ハンドラーを取得します。したがって、最初のボタンを 1 回クリックしてから 2 番目のボタンをクリックすると、アラートが表示されますが、2 番目のボタンを 2 回クリックしても何も起こりません。それを行うには：

$('#onclickpopupmenu').click(function() {
    // alert
    $('#popupmenuok').off('click').one('click', function() {
        // alert
    });
});

jsFiddle デモ