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 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
js数组操作常用方法
May 08 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
php构造函数与析构函数
2016/04/23 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
点球小游戏python脚本
2018/05/22 Python
多个python文件调用logging模块报错误
2020/02/12 Python
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
高中校园广播稿
2014/01/11 职场文书
家长对孩子评语
2014/01/30 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
《大海那边》教学反思
2014/04/09 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js