Bootstrap 3.3.2模态事件多次触发

Bootstrap模态事件多次触发,或者更确切地说是之前的一次。 我将模态事件包装在click函数中,该函数返回现在的模态id。

我怎样才能确保事件始终只触发一次,并且只有当click函数调用它时?

jQuery的

$('.img-modal').on('click', function () { // returns #modal-Id var modalIdClicked = $(this).attr('data-target') console.log ('modal id clicked from .img-modal = '+ modalIdClicked); console.log ('.img-modal clicked'); $(modalIdClicked).on('show.bs.modal', function(event) { console.log ( 'show.bs.modal'); }); }); 

默认Bootstrap 3.3.2模态HTML

 
image

我确实看过多次触发jQuery点击事件和Bootstrap 3 – 远程加载模式创建了重复的javascript事件 ,看起来这可以通过.off方法实现。

所以使用$(modalIdClicked).off().on('show.bs.modal', function(event) {在这种情况下做了诀窍。

有人可以向我解释为什么在这种情况下需要这种.off方法吗? 我无法理解点击的传递方式

每次点击都会再次点击Bootstrap JS吗? 为什么没有.off方法多次触发事件?

谢谢。

(我正在尝试从一本书中学习jQuery,如果有任何一本真的有一本好书或者甚至是唯一一本关于这本书的书,那么请给我发一张纸条,那里有很多并且都声称自然是最好的..谢谢。)

为什么没有.off方法多次触发事件?

因为每次单击元素.img-modal ,都会为show.bs.modal事件附加一个新的事件侦听器。 这就是为什么show.bs.modal在每次单击时show.bs.modal触发的原因。

有人可以向我解释为什么在这种情况下需要这种.off方法吗?

.off()方法只删除以前附加的事件。


您不需要使用.off()方法。

不是在每个click事件上附加事件show.bs.modal的事件监听器,而是应该为所有带有.modal类的元素添加一个事件监听.modal

这里的例子

 $('.modal').on('show.bs.modal', function (event) { console.log(this.id); }); 

show.bs.modal事件侦听器中, this绑定到显示的.modal元素; 因此,您可以识别显示哪个模态。 在上面的例子中, this.id将是modal-1

 modal.off().on('show.bs.modal', function(){ modalBody.load(remote_content); }); 

就我而言,我面临着多个remote_loads。 ‘.off()’帮助我将先前绑定的事件解绑定到目标模态。