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 相关文章推荐
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
js实现无缝轮播图特效
May 09 Javascript
详解Vue.js 响应接口
Jul 04 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python多继承原理与用法示例
2018/08/23 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Django框架视图函数设计示例
2019/07/29 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
浅析Python3 pip换源问题
2020/01/06 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
测试时代收集的软件测试面试题
2013/09/25 面试题
名人演讲稿范文
2013/12/28 职场文书
简历上的自我评价
2014/02/03 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
年底个人总结范文
2015/03/10 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
python spilt()分隔字符串的实现示例
2021/05/21 Python
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫