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 EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
jQuery动画与特效详解
Feb 01 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 Javascript
react antd实现动态增减表单
Jun 03 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python作用域用法实例详解
2016/03/15 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
自荐信格式的六要素
2013/09/21 职场文书
自我鉴定200字
2013/10/28 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
监理中标通知书
2015/04/16 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
创业计划书之酒厂
2019/10/14 职场文书
800字作文之大雪
2019/12/04 职场文书
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫