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

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

存在问题

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

还原问题现场

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

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

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

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

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

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

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

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

查看解决代码

看看问题代码,如下:

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

解决方法,如下:

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

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