为啥我在引导模式中的点击事件触发不止一个

Posted 2023-05-08

【中文标题】为啥我在引导模式中的点击事件触发不止一个

【英文标题】：Why I'm getting more than one on click event fire inside bootstrap modal为什么我在引导模式中的点击事件触发不止一个

【发布时间】：2015-05-11 18:44:18

【问题描述】：

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

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

  );

);

【问题讨论】：

小提琴链接已更新。

【参考方案1】：

因为每次打开模式对话框时都会附加新事件。 您需要在添加新的之前将其删除。

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

进行上述更改，它将起作用

【讨论】：

谢谢！我已经根据您的建议修复了我的代码（我不是在点击保存按钮，而是在提交表单），以防它帮助某人：$('form.myFormClass').off('submit').on('submit', function (e)

【参考方案2】：

这是因为您的代码定义了每次用户打开模式时的点击事件。您需要在“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');
    );

);

【讨论】：

感谢@Bhavik，代码添加的更改极少，但效果非常棒。

【参考方案3】：

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

【参考方案4】：

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

// Trigger function when modal hide
$('#mergeFieldsModal').on('hide.bs.modal', function(event)

     var btnMergeField = $(this).find('#btnMergeField');
     btnMergeField.unbind("click");
);

Demo

【参考方案5】：

打电话

btnMergeField.unbind('click');

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

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

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