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的一些总结
Nov 03 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
H5实现手机拍照和选择上传功能
Dec 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
WordPress网站性能优化指南
2015/11/18 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
python中list列表的高级函数
2016/05/17 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
简单了解python代码优化小技巧
2019/07/08 Python
python命令 -u参数用法解析
2019/10/24 Python
Pyqt5自适应布局实例
2019/12/13 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
Pandas的数据过滤实现
2021/01/15 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
《我的信念》教学反思
2014/02/15 职场文书
《童年》教学反思
2014/02/18 职场文书
快递员岗位职责
2014/09/12 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2015年复活节活动总结
2015/02/27 职场文书
医生个人年终总结
2015/02/28 职场文书
目标责任书格式范文
2015/05/11 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
节约用水广告语60条
2019/11/14 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python