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 parseInt字符转化为数字函数使用小结
Nov 05 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 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
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
javascript Demo模态窗口
2009/12/06 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
python实现文本去重且不打乱原本顺序
2016/01/26 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Django视图和URL配置详解
2018/01/31 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
党员民主生活会整改措施
2014/09/26 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
普宁寺导游词
2015/02/04 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
优秀创业计划书分享
2019/07/19 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python