浅析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实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
常用的 JS 排序算法 整理版
2018/04/05 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python装饰器语法糖
2019/01/02 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
评析教师个人的自我评价
2014/02/19 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
长城的导游词
2015/01/30 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
公司费用报销管理制度
2015/08/04 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
Oracle中日期的使用方法实例
2022/07/07 Oracle