jQuery绑定的on事件执行两次或多次（表格的行选中事件执行两次选中后又取消）

最新推荐文章于 2021-01-14 14:56:06 发布

WYB_Phil

最新推荐文章于 2021-01-14 14:56:06 发布

阅读量647

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.youkuaiyun.com/XiaoBo_S/article/details/103131514

版权

前端专栏收录该内容

3 篇文章

订阅专栏

在使用jQuery处理动态生成元素的事件绑定时，可能会遇到事件执行两次或多次的情况。本文通过一个表格行选中事件的例子，探讨了这个问题，并提供了三种解决方案：1) 函数末尾返回false；2) 使用event.stopPropagation()阻止事件冒泡；3) event.preventDefault()防止默认行为。通过这些方法，可以确保事件正确执行一次。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先这种情况一般都是发生在你绑定动态元素时，即你绑定的元素是由脚本动态生成的

2.我用的是dataTable表格插件，然后自己加了一列复选框，想要实现点击选中行同时选中复选框的效果，取消选中行则取消选中复选框，如下图所示

前台代码如下：

思路是绑定行点击事件，点击行时切换行的选中状态，然后判断复选框的选中状态即可checkChild是自定义的复选框的类

出现的问题是点击复选框无法选中行，经过前台打断点调试发现其实已经选中过了，只是代码执行了两遍又被取消了

如下

原因是我的行时juery动态生成的，复选框也是动态生成的，在执行on绑定方法时会发生js的冒泡事件，只有阻止了冒泡事件的发生代码就会执行一次了

阻止冒泡事件的方法

1.直接在函数末尾return false;

2.event.stopPropagation();

3.event.preventDefault();

我的代码修改后如下，就可以正常运行了

如果return false还不可以正常执行，那么就需要先解绑on事件再执行，这样肯定不会出错了，代码如下：

$('#tbl_studentAdded tbody').off('click','td.details-control')
.on('click', 'td.details-control', function () {


}

这样写on事件的绑定函数就可以了。