Question

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

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

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

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

Answer 1

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

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

Answer 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。如果模态中的关闭按钮具有类＆＃39; test＆＃39;，则弹出警报，否则添加类＆＃39; test＆＃39;到那个按钮。它第一次运行时，不会显示任何警报，但每次都会显示警报。

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

Answer 3

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

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

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

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

3 个答案: