Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Jquery/JS > 关于jQuery事件重复绑定的问题
隐藏/显示侧边栏

关于jQuery事件重复绑定的问题

2015-04-14 11:27    来源:未知    责任编辑:admin    字号【
jQuery支持一个元素可以重复绑定同一个事件,所以写代码的时候如果出现重复绑定是个很蛋疼的事情,尤其是对于菜鸟来说:


晚上写代码地时候,突然出了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之前有一个插件会解决这个问题 ,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.

更多
Tags 标签:
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |