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滚动条多种样式,推荐
Feb 05 Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 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封装的完整分页类示例
2018/08/21 PHP
网页自动跳转代码收集
2009/09/27 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
JS开发常用工具函数(小结)
2019/07/04 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
python三元运算符实现方法
2013/12/17 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
python初步实现word2vec操作
2020/06/09 Python
Python 实现一个计时器
2020/07/28 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
Hotels.com印度:酒店预订
2019/05/11 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
什么是URL
2015/12/13 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
面试自我评价范文
2014/09/17 职场文书
党建工作整改措施
2014/10/28 职场文书
父亲节活动总结
2015/02/12 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
预备党员介绍人意见
2015/06/01 职场文书
七年级上册生物的课件
2019/08/07 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL