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之后，日志打印没有重复执行的情况了。

​