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中绑定事件的命名空间详解
Apr 05 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
vue-cli点击实现全屏功能
Mar 07 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
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
班主任工作年限证明
2014/01/12 职场文书
留学顾问岗位职责
2014/04/14 职场文书
销售人员工作自我评价
2014/09/21 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
微信搭讪开场白
2015/05/28 职场文书