浅析jquery某一元素重复绑定的问题


Posted in Javascript onJanuary 03, 2014

某天晚上写代码的时候,突然出了bug,想了很久都不知道问题出在哪里(其实是很简单的问题,但由于我还是个菜鸟,所以不知道)。几经周折,这中间的过程就不提了,终于让我在快崩溃的时候,发现了原因。原来是因为同一jquery元素可以重复绑定,当使用了嵌套绑定的时候,就容易出错。如代码:

$('.test').bind('click',function(){ 
     $('.last').bind('click',function(){ 
          alert('nihao'); 
     }); 
}); <button class="test">上一级绑定</button> 
<button class="last">下一级绑定</button>

当我点击第一个button时,再点击第二个button,是没有问题的。可如果在页面刷新之前,点击了多次(n次)第一个button的话,此时再点击第二个button,就出问题了,就会弹出(n个)alert对话框。

解决办法:在会重复绑定的元素上执行解绑,即unbind(),如:

$('.test').bind('click',function(){ 
     $('.last').unbind('click').bind('click',function(){ 
          alert('nihao'); 
     }); 
});
 
这样,不管点击多少次第一个button,再点击第二个时,只会弹出一个alert对话框。

这里再介绍两个与bind()相关联的,one()和live()。
 
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。通俗的讲就是只管用一次。

至于live(),引用别人讲的(http://www.cnblogs.com/wujilong/articles/1866834.html):
平时在使用jQuery进行AJAX操作的时候,新生成的元素事件会失效,有时候不得不重新绑定一下事件,但是这样做很麻烦。例如评论分页后对评论内容的JS验证会失效等。在jQuery1.3之前有一个插件会解决这个问题http://jquery.com/ ,jQuery1.3增加了一个live()方法,下面是手册上的说明:

jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。

还不支持 blur, focus, mouseenter, mouseleave, change, submit

与bind()不同的是,live()一次只能绑定一个事件。

这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。

.live()与流行的liveQuery插件很像,但有以下几个主要区别:

•.live 目前只支持所有事件的子集,支持列表参考上面的说明。
•.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
•.live 没有”setup”和”cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。

要移除用live绑定的事件,请用die方法

用法示例:
<div class=”myDiv”></div>

jquery:
$(“.myDiv”).live(“click”, function(){
alert(“clicked!”);
});

如果使用javascript动态创建一个class为mydiv的元素,点击元素依然会有弹出。为什么使用live后就有了呢?这是因为jquery利用了事件的冒泡机制,直接把事件绑定在了document上,然后通过event.target找出事件的来源。这跟jquery.livequery插件不一样,jquery.livequery每20毫秒做一次检查,如有新生成则重新绑定一次事件。

使用live当然有利也有弊:

好处就是:元素更新时不用反复去定义事件。
坏处就是:把事件绑定在document上会在页面上每一个元素都呼叫一次,如使用不当会严重影响性能。而且不支持blur, focus, mouseenter, mouseleave, change, submit。

Javascript 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
JS的replace方法介绍
Oct 20 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 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
js实现动态改变字体大小代码
Jan 02 #Javascript
You might like
php判断两个浮点数是否相等的方法
2015/03/14 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Python zip()函数用法实例分析
2018/03/17 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
eBay德国站:eBay.de
2017/09/14 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
会议接待欢迎词
2014/01/12 职场文书
小学校园活动策划
2014/01/30 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
步步惊心观后感
2015/06/12 职场文书
新学期感想
2015/08/10 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android