显示 BS 模态后仅初始化一次事件答案

【问题标题】：Initialized events only once after BS modal shown显示 BS 模态后仅初始化一次事件
【发布时间】：2014-12-25 01:37:36
【问题描述】：

我在 BS 模态对话框中有几个按钮，我想在显示模态后初始化这些按钮的事件。这是有效的。

但问题是，每当我再次打开模式（关闭并再次打开）时，事件都会再次初始化。因此，事件触发多次（等于事件初始化的次数）。如果我打开模式 3 次事件触发 3 次

$('#mymodal').on('shown.bs.modal', function() {
  $(this).on('click', '.mybutton', function() {
    alert('button clicked');
  });
});

我希望它只触发一次。我错过了吗？我怎样才能做到这一点？

【问题讨论】：

我试图重新创建您的问题。但对我来说，它工作正常。看看JSFIDDLE

标签： jquery twitter-bootstrap modal-dialog bootstrap-modal

【解决方案1】：

在添加之前尝试删除点击事件。

$('#mymodal').on('shown.bs.modal', function() {
  $(this).off('click', '.mybutton').on('click', '.mybutton', function() {
    alert('button clicked');
  });
});

【讨论】：

【解决方案2】：

想出一个类名来指示该按钮的事件何时已经运行，并在第一次运行时将其添加到按钮。然后在shown.bs.modal 触发时检查该类的存在。你的按钮有那个类属性？不要运行该事件。

BOOTPLY

HTML：

<button type="button" class="btn btn-default" id="btnOpenModal" data-dismiss="modal">Open Modal</button>

<div class="modal fade" id="myModal">
  <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">×</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="btnClose" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

jQuery：

$('#btnOpenModal').click(function() {
  $('#myModal').modal('show');
});

$('#myModal').on('shown.bs.modal', function() {
  if ($('#btnClose').hasClass('test')) {
   alert('Do the thing.'); 
  } else {
   $('#btnClose').addClass('test');
  }
});

在上面的示例中，当您单击“打开模式”按钮时，会显示模式，这会触发 shown.bs.modal 事件。当它被触发时，它运行一个简单的 if/else。如果模式中的关闭按钮具有类“测试”，则弹出警报，否则将类“测试”添加到该按钮。第一次运行时，不会显示任何警报，但之后每次都会收到警报。

这应该会让你指向正确的方向。

【讨论】：

【解决方案3】：

很明显，因为每次触发shown.bs.modal 事件时都会附加一个新的click 事件处理程序。所以解决方案是将click的事件处理程序移到bs.shown.modal的事件处理程序之外的某个地方。

$('#myModal').on('click', '.mybutton', function() {
    alert('button clicked');
});

$('#mymodal').on('shown.bs.modal', function() {
    //do something
});

【讨论】：