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 相关文章推荐
php图像生成函数之间的区别分析
Dec 06 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
React组件生命周期详解
Jul 03 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
Vuex入门到上手教程
Jun 20 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
vue判断按钮是否可以点击
Apr 09 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
基于mysql的bbs设计(五)
2006/10/09 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
Python中的列表知识点汇总
2015/04/14 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python实现远程控制电脑
2019/05/23 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
小学数学教学反思
2014/02/02 职场文书
心理健康日活动总结
2014/05/08 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
Python如何用re模块实现简易tokenizer
2022/05/02 Python