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

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

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

进行上述更改后即可使用

Answer 2

这是因为每次用户打开模态时，您的代码都会定义click事件。您需要在＆＃39; show.bs.modal＆＃39;之外定义点击事件。另一种只在不能使用第一种方法时才需要使用的方法是当用户关闭模态时off（）click事件。

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

隐藏unbind

时，您需要为model点击事件添加以下代码

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

<强> Demo

Answer 5

致电

btnMergeField.unbind('click');

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

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

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

为什么我在bootstrap模式中点击事件火灾时会得到多个

Fiddle

5 个答案: