Question

这是代码：

$("#button").click(function(event){
     $('#modal').on('shown.bs.modal', function (e) { 
         $("#target").effect( "shake");
       });
});

问题：

当模态第一次显示时，#target会摇动一次，并且效果很好。但是，当我再次单击该按钮时，#target晃动两次，再次单击目标晃动了3倍，然后是4倍。

每次单击按钮时，抖动都会增加，直到刷新浏览器为止。

这是因为每次单击按钮都会显示事件的执行。bs.modal会增加。

请帮助。

Answer 1

由于每次单击按钮都会为shown.bs.modal事件创建一个新的事件处理程序，因此发生了增量抖动。

如果您要跟踪此事件的事件处理程序，它将看起来像这样：

单击按钮之前：0个事件处理程序
单击按钮一次：1个事件处理程序
单击两次按钮：2个事件处理程序
...

为避免这种情况，您可以在使用JQuery的off函数摇晃后清除show.bs.modal事件处理程序，使代码如下所示：

$("#button").click(function(event){
     $('#modal').on('shown.bs.modal', function (e) { 
         $("#target").effect( "shake");
         // 'this' is the '#modal' element
         this.off('shown.bs.modal');
     });
});

多次显示Bootstrap Modal.bs.modal事件

1 个答案: