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

 本篇文章主要是对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之前有一个插件会解决这个问题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。

时间: 2024-11-03 16:27:42

浅析jquery某一元素重复绑定的问题的相关文章

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

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

浅析jQuery事件之on()方法绑定多个选择器,多个事件_jquery

$(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件   $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function

jquery 新建的元素事件绑定问题解决方案_jquery

js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. 复制代码 代码如下: <table> <tbody> <tr> <td>这行原来就有</td> <td><buttonclass="del">删除</button>&l

jQuery中dom元素上绑定的事件详解_jquery

作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧. 查看原生绑定的事件函数代码 所谓原生就是通过addEventListener方法绑定到dom元素上.这个好办: 审查绑定事件的元素(对着它右键->审查元素)在弹出的Elements视图的控制台,右侧点击"Event Listeners&quo

jQuery防止重复绑定事件的解决方法_jquery

本文实例分析了jQuery防止重复绑定事件的解决方法.分享给大家供大家参考,具体如下: 一.问题: 今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行. 下面是一个click事件被重复绑定的示例: function reg_button_click(){ $("#button).click(function(){ alert("button click"); }); } $(document).ready(function(){ #重复注册

浅析jquery unbind()方法移除元素绑定的事件_jquery

unbind()方法可以移除元素已绑定的事件,它的调用格式如下: $(selector).unbind(event,fun) 其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称. 语法  unbind()函数主要有以下两种形式的用法: 用法一: jQueryObject.unbind( [ events [, handler ]] ) 移除当前匹配元素的events事件绑定的事件处理函数handler. 用法二: jQueryObject.unb

jquery live()重复绑定的解决方法介绍

 本篇文章主要是对jquery中live()重复绑定的解决方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Query中.live()方法的使用方法    今天在写代码的时候遇到一个问题,直接上代码看: $(function(){            $(".file").live("click",function(){                     var task_name=$(this).text();            

jquery事件重复绑定的快速解决方法

 本篇文章主要是对jquery事件重复绑定的快速解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一 $.fn.live 重复绑定   解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件.   代码如下: //先通过die()方法解除,再通过live()绑定 $("#selectAll").die().live("click",function(){ //事件运行代码 })

解决jquery中事件重复绑定问题

一$.fn.live 重复绑定 解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. //先通过die()方法解除,再通过live()绑定 $("#selectAll").die().live("click",function(){ //事件运行代码 }); 二click等事件 解决:使用unbind("click")方法先解除绑定的事件再绑定新事件,即在给对象绑定事件