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

jquery unbind 异步_jquery 使用 unbind 解决重复绑定执行事件相关推荐

html下拉框onchange事件,javascript jquery框架如何为html中select标签绑定onChange事件呢？...
摘要: 下文讲述使用jquery框架为select标签绑定onChange事件的方法分享,如下所示: 在html中我们知道select标签是一个下拉标签,我们可以通过此标签限定标签中的值, onCha ...
jquery unbind 异步_JQuery中的bind()和unbind()的理解
bind()和unbind()提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件. 1.JQuery中事件可以重复绑定,不会覆盖. 1 $("#button ...
jquery unbind 异步_JQuery中绑定事件（bind()）和移除事件（unbind()）
有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: $(fu ...
jquery unbind 异步_jQuery中的内置方法：unbind()
unbind()方法是jQuery中的内置方法,用于删除任何选定的事件处理程序.此方法可用于删除特定的事件处理程序或停止特定的函数.它可以在任何使用事件对象的事件处理程序上工作. 如果没有提供参数,则 ...
jquery事件重复绑定的几种解决方法（二）
防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法一.bind().unbind()方法 bind();绑定事 ...
jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/unde
10.4 .bind() .one() 10.4.1 如何使用 .bind( eventType, [eventData], handler(eventObject) ) 在匹配的元素上绑 ...
jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/undelegate
Js代码作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 后文预告:封装事件对象便 ...
mvc php 分页,MVC+jQuery.Ajax异步实现增删改查和分页_jquery
本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; u ...
ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

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

jquery unbind 异步_jquery 使用 unbind 解决重复绑定执行事件相关推荐

最新文章

热门文章