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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
js密码强度实时检测代码
Mar 02 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 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 随机排序广告的实现代码
2011/05/09 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python可变参数用法实例分析
2017/04/02 Python
Python实现ping指定IP的示例
2018/06/04 Python
python__name__原理及用法详解
2019/11/02 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python time()的实例用法
2020/11/03 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
车间组长岗位职责
2013/12/20 职场文书
小区门卫岗位职责
2013/12/31 职场文书
大学生毕业鉴定
2014/01/31 职场文书
文字自荐书范文
2014/02/10 职场文书
学雷锋活动简报
2015/07/20 职场文书
厉行节约工作总结
2015/08/12 职场文书
小学班级标语口号大全
2015/12/26 职场文书
培训心得体会怎么写
2016/01/25 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
Python Django项目和应用的创建详解
2021/11/27 Python
基于Python实现对比Exce的工具
2022/04/07 Python
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技