爲什麼jQuery的點擊事件引發多次

我這裏有 http://jsfiddle.net/DBBUL/10/爲什麼jQuery的點擊事件引發多次

$(document).ready(function ($) { 

    $('.creategene').click(function() { 

     $('#confirmCreateModal').modal(); 

     $('#confirmCreateYes').click(function() { 
      $('#confirmCreateModal').modal('hide'); 

      var test = "123"; 
      alert(test); 
      console.log(test);    
     }); 
    }); 
});

此示例代碼如果你點擊創建按鈕3次，每次你點擊確認是，警報被觸發多次每次點擊而不是一次。

如果您單擊創建按鈕3次，並且每次單擊否，並且在第4次單擊是時，將爲每個先前的點擊而不是僅一次點擊警報。

這種行爲對我來說似乎很奇怪，因爲我希望每次點擊一次就會觸發警報。我必須使用.unbind（）還是有更好的解決方案？

有人能告訴我爲什麼會發生這種情況，以及如何解決它？

謝謝

來源

2014-03-04 iambdot

因爲你綁定了多次。單擊事件中的單擊事件意味着每次單擊時，都會在先前綁定的事件之上綁定新的單擊事件。除非點擊事件創建元素，否則不要在點擊事件內綁定點擊事件。也沒有必要一遍又一遍地重新初始化模態。

$(document).ready(function ($) { 

    $('#confirmCreateModal').modal({show: false}); 

    $('#confirmCreateYes').click(function() { 
     $('#confirmCreateModal').modal('hide'); 

     var test = "123"; 
     alert(test); 
     console.log(test);    
    }); 

    $('.creategene').click(function() { 

     $('#confirmCreateModal').modal('show'); 

    }); 
});

Demo

來源

2014-03-04 19:20:53

你會如何處理這一點，如果主click事件（.creategene）在knockoutjs點擊綁定self.createGene =函數（）{} – iambdot

我會做時這使用數據屬性而不是JavaScript，然後綁定到關閉事件。 –

好吧，不是關閉事件，而只是「是」按鈕。沒有真正的需要初始化模態或有一個點擊事件來打開它。 –

添加到您的代碼：

$("#confirmCreateYes").unbind("click");

像這樣：

$(document).ready(function ($) { 

$('.creategene').click(function() { 

    $('#confirmCreateModal').modal(); 

    $('#confirmCreateYes').click(function() { 
     $('#confirmCreateModal').modal('hide'); 

     var test = "123"; 
     alert(test); 
     console.log(test); 
     $("#confirmCreateYes").unbind("click"); 
    }); 
});

}）;

它將解除綁定該事件，以便它不會綁定在上一個事件之上。這允許事件僅在原始點擊事件中觸發。

這不是一個好方法。它將解除綁定到元素的所有點擊事件。我將把它留在這裏用於學習目的。

來源

2014-03-04 19:22:02 kylealonius

這不起作用。如果選擇此方法，則解除綁定需要在綁定之前，而不是在函數實現（？）內部。但是，由於多種原因，這仍然是一個糟糕的做法，首先是您盲目地解除了與該項目相關的所有點擊事件，而不一定只是所討論的那個事件。 –

不，它比@kylealonius放在其他地方更合理。它將在最早的時間點解除限制。儘管如此，進一步減少使用'.one（）'而不是'.click（）'會更有意義，這樣你甚至不必自己解除綁定。但是，那麼你爲什麼解開它呢？無論如何，它只能在模態可見時觸發。 –

羅伯特對於解除所有點擊事件是正確的。我沒有想到這一點。我試圖保留原來的設計。但是由於創建yes按鈕有一個ID，所以其他方法會更好，因爲click事件不會觸發任何其他元素。 – kylealonius

改變這樣

$(document).ready(function ($) { 

    $('.creategene').click(function() { 

     $('#confirmCreateModal').modal(); 


    }); 
    $('#confirmCreateYes').click(function() { 
      $('#confirmCreateModal').modal('hide'); 

      var test = "123"; 
      alert(test); 
      console.log(test);    
     }); 
});

fiddle

代碼你不必在每個按鈕上單擊綁定$('#confirmCreateYes').click。

來源

2014-03-04 19:23:28

你也可以試試這個 -

$("#confirmCreateYes").unbind().click(function() { 
//Stuff 
});

來源

2016-01-07 16:16:06 sajalsuraj

單獨的代碼塊並不能提供良好的答案。請添加解釋（爲什麼它解決了問題，錯誤在哪裏等） –

爲什麼jQuery的點擊事件引發多次

回答

相關問題