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的无刷新分页技术
Jun 11 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python中for用来遍历range函数的方法
2018/06/08 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python使用Geany编辑器配置方法
2020/02/21 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
房地产项目策划书
2014/02/05 职场文书
xxx同志考察材料
2014/02/07 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
中学图书馆工作总结
2015/08/11 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL