解决bootstrap的模态框shown.bs.modal、hidden.bs.modal函数重复触发的问题

最新推荐文章于 2021-09-06 15:09:29 发布

麻辣_水煮鱼

最新推荐文章于 2021-09-06 15:09:29 发布

阅读量3k

点赞数 1

分类专栏：每日一记

本文链接：https://blog.csdn.net/weixin_42217154/article/details/105515834

版权

每日一记专栏收录该内容

95 篇文章

订阅专栏

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

事件类型描述

show.bs.modal show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的relatedTarget 属性进行访问。
shown.bs.modal 此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal hide 方法调用之后立即触发该事件。
hidden.bs.modal 此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal 从远端的数据源加载完数据之后触发该事件。

在今天调试代码的时候，发现了一个问题，手动打开模态框时，每打开一次，shown.bs.modal函数触发次数就会+1，例如第一次打开，触发shown.bs.modal函数一次，第二次打开，触发shown.bs.modal函数两次... 第N次打开，触发shown.bs.modal函数N次。

出现这种情况，可以从绑定事件的地方下手，触发多次，说明绑定了多次此事件，拿jquery来说，因为采用jQuery .on() 方式绑定钩子事件，如果没有把绑定事件的函数放在最外层，而是放在局部，就会造成多次绑定的现象发生，所有我们可以使用jquery 的 .off() 方式去移除掉已经绑定事件的操作，保证事件只绑定一次，进而解决问题。

实现代码：

$('#zdyCo_Modal').on('shown.bs.modal', function () {
      // 执行一些动作...
     create_tj_table(Data_table,val_field,val_conds);
     $('#zdyCo_Modal').off('shown.bs.modal');//去除绑定
})