jquery事件重复绑定的快速解决方法


Posted in Javascript onJanuary 03, 2014

一 $.fn.live 重复绑定

解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件。

//先通过die()方法解除,再通过live()绑定
$(“#selectAll”).die().live(“click”,function(){
//事件运行代码
});

二 click等事件

解决:使用unbind("click")方法先解除绑定的事件再绑定新事件,即在给对象绑定事件之前先移除该对象上的原有事件

完整测试代码:

<div class="box">
            <button id="test">重复绑定触发按钮</button>(点击此按钮两次及以上,即可触发重复绑定,再点击下面的按钮就可看到结果)
            <br/><br/>
            <button id="test1">click重复绑定测试按钮</button>
            <button id="test2">click绑定一次测试按钮</button>
            <button id="test3">live重复绑定测试按钮</button>
            <button id="test4">live绑定一次测试按钮</button>
        </div>
        <script type="text/javascript" src="../static/jquery-1.6.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var i = 1,j=1,k=1,h=1,n=1;
                var triggerBind = function(){
                    $("#test1").click(function() {
                        alert("click未解除绑定重复绑定执行第" + j++ + "次");
                    });
                    $("#test2").unbind('click').click(function() {
                        alert("click解除绑定执行" + k++ + "次");
                    });                    $("#test3").live("click",function() {
                        alert("live未解除绑定重复执行第" + h++ + "次");
                    });
                    $("#test4").die().live("click",function() {
                        alert("live解除绑定后执行" + n++ + "次");
                    });
                }                
                $("#test").click(function() {
                    triggerBind();
                    alert("触发绑定点击第" + i++ + "次");
                });
            });
        </script>
Javascript 相关文章推荐
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
js获取微信版本号的方法
May 12 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 #Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 #Javascript
解决JS中乘法的浮点错误的方法
Jan 03 #Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 #Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 #Javascript
JS+JSP checkBox 全选具体实现
Jan 02 #Javascript
使用js完成节点的增删改复制等的操作
Jan 02 #Javascript
You might like
JAVA/JSP学习系列之六
2006/10/09 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
PHP队列用法实例
2014/11/05 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
js实现tab切换效果
2017/02/16 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
Python实现读取并保存文件的类
2017/05/11 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
python数据挖掘需要学的内容
2019/06/23 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
大三预备党员入党思想汇报
2014/01/08 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
陪护人员误工证明
2015/06/24 职场文书
2016党校培训心得体会
2016/01/07 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
实习报告范文
2019/07/30 职场文书
导游词之江南周庄
2019/12/06 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis