0
点赞
收藏
分享

微信扫一扫

jquery 使用 unbind 解决重复绑定执行事件


存在问题

在jquery监听click事件的时候会出现点击一次没有重复,点击第二次就重复的情况。出现这个问题的原因是之前的click事件被绑定后,并没有解绑。

还原问题现场

先来看看需求:点击一个数据表之后,确认自定义的模态窗口,然后删除改行的数据,并打印改行数据的ID。


jquery 使用 unbind 解决重复绑定执行事件_click事件

jquery 使用 unbind 解决重复绑定执行事件_数据_02

jquery 使用 unbind 解决重复绑定执行事件_jquery_03


从上面三张图可以看到一个执行流程,这次是正常的,只打印了一次ID。下面来再删除第二行数据。


jquery 使用 unbind 解决重复绑定执行事件_数据_04

jquery 使用 unbind 解决重复绑定执行事件_jquery_05


问题:发现重复打印了前面绑定了 id = 1 的日志数据。

问题的基本原因:应该是上一行删除的数据 id 的click事件没有被解绑,当再次触发的时候,就重复执行上一次绑定的事件。

可以再删除第三个数据,看看 id = 1 和 id = 2 的事件是不是都重复了。


jquery 使用 unbind 解决重复绑定执行事件_click事件_06

jquery 使用 unbind 解决重复绑定执行事件_click事件_07


删除之后,打印了 3 个 id = 1, 2个 id = 2, 1个 id = 3。说明前面绑定的事件又重复之前了一遍。

这个就有点像jquery执行动画效果之前,需要使用一个​​stop()​​方法,将之前执行的动画都停止掉一样。

这种事件绑定重复的执行问题,需要一个​​unbind()​​方法,先解除绑定,再绑定执行,才能解决重复执行。不然重复进行绑定事件,那么就会重复执行事项。

查看解决代码

看看问题代码,如下:


jquery 使用 unbind 解决重复绑定执行事件_jquery_08


就是箭头的位置多次进行click事件绑定导致重复执行了。

解决方法,如下:


jquery 使用 unbind 解决重复绑定执行事件_click事件_09


在执行事件绑定之前,进行 ​​unbind('click')​​ 即可。


jquery 使用 unbind 解决重复绑定执行事件_数据_10


设置了​​unbind​​之后,日志打印没有重复执行的情况了。


jquery 使用 unbind 解决重复绑定执行事件_click事件_11


举报

相关推荐

0 条评论