Bootstrap Modal shown.bs.mode事件执行多次

Question

这是代码：

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

问题：

当模态首次出现时，#target抖动一次，工作正常。但当我再次点击按钮时，#target会摇晃两次，再次点击目标会摇晃3次，然后是4次。

每次我点击按钮，震动都会增加，直到我刷新浏览器。

这是因为每次单击按钮时，事件shown.bs.mode的执行都会增加。

请帮忙。

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');
});
});