我的函数在 show.bs.modal 之后加载了很多次

Question

我正在尝试使用 toastr 在模式打开时显示帐户提醒

问题出在我打开模式时；当我单击按钮打开模式时，警报只显示一次（应该是，这是完美的），但第二次打开模式时，警报显示 2 次我第三次打开模式时，警报显示了 5 次以此类推，9、12、18、24、32 次。就好像它们在成倍增加，所以我输入了：console.log("Modal Open")，这就是控制台上显示的内容：

Output Console

这是我的代码，感谢您的帮助，因为我不知道为什么会这样

function edit_order(tbody, datatable) {
//ON CLICK <a class="edit"></a>
        $(tbody).on("click", "a.edit", function() {
           
        $('#myModal2').on('show.bs.modal', function(event) {
              
          var modal = $(this);
          console.log("Modal Open");
              
        })
   });
}

Answer 1

那是因为你用一个事件处理程序来解决另一个问题。

每edit_order 运行秒，注册一个事件处理程序来监听点击事件。当发生这种情况时，将注册一个新的 show.bs.modal 事件处理程序。因此，如果您运行 edit_order 不止一次，您将有多个处理程序来为 #myModal2 设置一些新的处理程序...这是乘法效应。

鉴于代码非常小，我会建议一个快速修复：使用 .one() instead of on() 来点击 a.edit。因此 #myModal2 上的处理程序只会设置一次。

但是最好回顾一下您如何设置事件处理程序...您可能在很多地方都犯了同样的错误。 提醒：不要使用事件来注册事件处理程序。 ;)

下面是适用于该问题的快速修复方法：

function edit_order(tbody, datatable) {
//ON CLICK <a class="edit"></a>
  $(tbody).one("click", "a.edit", function() {  // <-- .one here

    $('#myModal2').on('show.bs.modal', function(event) {

      var modal = $(this);
      console.log("Modal Open");

    })
  });
}

简而言之，这应该足够了（为什么在 named-function 中呢？）：

$('#myModal2').on('show.bs.modal', function(event) {

  var modal = $(this);
  console.log("Modal Open");
})

我的函数在 show.bs.modal 之后加载了很多次

My function loads many times after show.bs.modal

javascript

jquery

modal-dialog

bootstrap-modal

bootstrap-4