為什么我在bootstrap模式中點擊事件火災時會得到多個

Question

我在這里遇到一些問題，需要一些幫助。 我認為這很容易，但我無法弄清楚自己發生了什么。 請看下面的小提琴：

小提琴

當我只打開模態並第一次點擊它時。 它正常工作，但是當我重新打開它時，就會出現問題。 它不止一次觸發on click事件。

HTML

<button data-target="#mergeFieldsModal" data-toggle="modal" data-message-id="#message" class="btn btn-info">Open Modal</button>
<div id="result"></div>

<div id="mergeFieldsModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title"><span class="ss-shuffle ss-icon"></span> Merge Fields</h3>
      </div>
      <div class="modal-body">
        <p>Click Add. After clicking add, open the modal again then click add again to see the problem.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" id="btnMergeField" class="btn btn-primary">Add</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

JS

// Append merge field to message textarea
$('#mergeFieldsModal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget);
  var messageId = button.data('message-id');
  var btnMergeField = $(this).find('#btnMergeField');

  btnMergeField.on('click', function() {

    $('#result').append('<p>Fired!' + '</p>'); // Add to DOM
    $('#mergeFieldsModal').modal('hide'); // Hide Modal

  });

});

Answer 1

因為每次打開模態對話框時都要附加新事件。 您需要在添加新內容之前將其刪除。

 btnMergeField.off('click').on('click', function(){

進行上述更改即可

Answer 2

這是因為每次用戶打開模態時，您的代碼都會定義click事件。 您需要在'show.bs.modal'之外定義click事件。 另一種方法，只有在不能使用第一種方法時才需要使用，當用戶關閉模態時，off（）單擊事件。

$('#mergeFieldsModal').on('show.bs.modal', function(event){
    var button = $(event.relatedTarget);
    var messageId = button.data('message-id');
    var btnMergeField = $(this).find('#btnMergeField');

    btnMergeField.on('click', function(){

      $('#result').append('<p>Fired!' + '</p>'); // Add to DOM
      $('#mergeFieldsModal').modal('hide'); // Hide Modal

    });
    $(this).on('hide.bs.modal', function() {
      btnMergeField.off('click');
    });

});

Answer 3

每次構建模態時都會運行綁定事件的javascript，您需要取消綁定事件或在代碼中找到更好的位置來綁定事件

Answer 4

隱藏model時，需要為unbind click事件添加以下代碼

// Trigger function when modal hide
$('#mergeFieldsModal').on('hide.bs.modal', function(event)
{
     var btnMergeField = $(this).find('#btnMergeField');
     btnMergeField.unbind("click");
});

演示

Answer 5

呼叫

btnMergeField.unbind('click');

綁定點擊處理程序之前。 否則，您在上次打開的對話框中綁定的單擊處理程序仍處於活動狀態。

作為替代方案，您可以將click處理程序全局綁定到某處，這樣就不需要一次又一次地調用unbind()/bind() 。 像這樣的東西：

$("*").on('click', "div[id=mergeFieldsModal]", function(){
    ...
    return false;
});