浅析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 相关文章推荐
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
详解js中==与===的区别
Jan 08 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
Node.js 中使用 async 函数的方法
Nov 20 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
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
php实现源代码加密的方法
2015/07/11 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
Node.js事件驱动
2015/06/18 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
js实现一个简易计算器
2020/03/30 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
pytorch中的inference使用实例
2020/02/20 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
自荐信的格式
2014/03/10 职场文书
幼儿园秋游感想
2014/03/12 职场文书
中秋晚会策划方案
2014/06/12 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Python实现8种常用抽样方法
2021/06/27 Python