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获取多个tagname的节点数组
Sep 22 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
js判断密码强度的方法
Mar 18 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
英国领先的游戏零售商:GAME
2019/09/24 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
护理人员的自我评价分享
2014/03/15 职场文书
爱国演讲稿500字
2014/05/04 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
物流管理专业推荐信
2014/09/06 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP