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
我确实看过多次触发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()’帮助我将先前绑定的事件解绑定到目标模态。