为什么我在 bootstrap 模态中触发了不止一个点击事件

Question

我遇到了一些问题，需要一些帮助。我认为这很容易，但我自己无法弄清楚发生了什么。请参阅下面的fiddle：

Fiddle

当我第一次打开模式并点击它时。它工作正常，但是当我重新打开它时，问题就出现了。它不止一次触发点击事件。

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

这是因为您的代码定义了每次用户打开模式时的点击事件。您需要在 'show.bs.modal' 之外定义点击事件。另一种方法，只有在您不能使用第一种方法时才需要使用，即在用户关闭模式时关闭（）单击事件。

$('#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 2

致电

btnMergeField.unbind('click');

在绑定点击处理程序之前。否则，您在上次打开的对话框中绑定的点击处理程序仍然处于活动状态。

作为替代方案，您可以将点击处理程序全局绑定到某处，这样就无需一次又一次地调用 unbind()/bind()。像这样：

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

Answer 3

绑定事件的javascript是运行每次构建模态时，您需要取消绑定事件或在代码中找到更好的位置来绑定事件

Answer 4

因为每次打开模式对话框时您都会附加新事件。您需要先删除它，然后再添加新的。

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

进行上述更改即可生效

Answer 5

隐藏model

时需要为unbind点击事件添加如下代码

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

Demo

为什么我在 bootstrap 模态中触发了不止一个点击事件

Why I'm getting more than one on click event fire inside bootstrap modal

html

javascript

jquery

twitter-bootstrap

bootstrap-modal

Fiddle