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计算任意值之间随机数的方法
Jan 16 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
浅析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中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php实现的RSS生成类实例
2015/04/23 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
js字符编码函数区别分析
2008/06/05 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
广州迈达威.net面试题目
2012/03/10 面试题
Python面试题集
2012/03/08 面试题
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
小学数学课后反思
2014/04/23 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
报到证办理个人委托书
2014/10/06 职场文书
捐款感谢信
2015/01/20 职场文书
小学班主任心得体会
2016/01/07 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技