浅析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 相关文章推荐
重载toString实现JS HashMap分析
Mar 13 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
js解决movebox移动问题
Mar 29 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
Vue中使用vux的配置详解
May 05 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 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 swfupload图片上传的实例代码
2013/09/30 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
django自定义模板标签过程解析
2019/12/14 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
母亲追悼会答谢词
2014/01/27 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
教师党员公开承诺书
2014/03/25 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server