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 相关文章推荐
基于jQuery实现放大镜特效
Oct 19 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 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
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
解决python3爬虫无法显示中文的问题
2018/04/12 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
什么是View State?
2013/01/27 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
技校生自我鉴定
2013/12/08 职场文书
代理班主任的自我评价
2014/02/04 职场文书
优秀党员获奖感言
2014/02/18 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
揭牌仪式主持词
2014/03/19 职场文书
机械机修工岗位职责
2014/08/03 职场文书
授权委托书怎么写
2014/09/25 职场文书
教师岗位职责
2015/02/03 职场文书
医院保洁员管理制度
2015/08/05 职场文书
工作感想范文
2015/08/07 职场文书
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python