`
axl234
  • 浏览: 260237 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery live() 重复绑定的解决办法

 
阅读更多

$(function(){
           $(".file").live("click",function(){
                    var task_name=$(this).text();
                    $("#selecting tbody").append("<trclass=gradeA'><tdclass='center'>"+task_name+"</td></tr>");     
           });  
    });
$(".file")对象是从后台传过来的,click肯定是不行的,bind()也无法获取动态添加的元素,因此只能用live(),但是使用live()遇到的问题是表格行会莫名其妙的添加了两行,即绑定事件重复执行了,纠结了一上午终于找到了原因,先看live()方法的介绍。

live(type, [data],fn)


概述

jQuery给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind()时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>
           <div class="clickme">Clickhere</div>
       <body>

可以给这个元素绑定一个简单的click事件:

    $('.clickme').bind('click', function() {         alert("Bound handler called.");      }); 
当点击了元素,就会弹出一个警告框。

然后,想象一下这之后有另一个元素添加进来了。

    $('body').append('<div class="clickme">Another target</div>');
尽管这个新的元素也能够匹配选择器".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。

.live()就提供了对应这种情况的方法。如果我们是这样绑定click事件的:

    $('.clickme').live('click', function() {         alert("Live handler called.");       });
然后再添加一个新元素:

$('body').append('<divclass="clickme">Anothertarget</div>');

然后再点击新增的元素,他依然能够触发事件处理函数。 


事件委托

.live()方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。

传递给 .live()的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:

1、生成一个click事件传递给<div> 来处理

2、由于没有事件处理函数直接绑定在 <div>上,所以事件冒泡到DOM树上

3、事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。

4、执行由 .live()绑定的特殊的 click 事件处理函数。

5、这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测$(event.target).closest('.clickme') 能否找到匹配的元素来实现的。

6、如果找到了匹配的元素,那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。


附加说明

.live()虽然很有用,但由于其特殊的实现方式,所以不能简单的在任何情况下替换 .bind()。主要的不同有:

在jQuery 1.4中,.live()方法支持自定义事件,也支持所有的JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blue事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。

另 外,在jQuery1.4.1中,也能支持hover(映射到"mouseenter mouseleave")。然而在jQuery1.3.x中,只支持支持的JavaScript事件和自定义事件:click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.

.live()并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live()方法,正如前面例子里提到的。

当一个事件处理函数用 .live()绑定后,要停止执行其他的事件处理函数,那么这个函数必须返回 false。 仅仅调用 .stopPropagation()无法实现这个目的。


参考 .bind() 方法可以获得更多关于事件绑定的信息。

在jQuery 1.4.1中,你可以一次绑定多个事件给 .live() ,跟.bind() 提供的功能类似。

在jQuery 1.4中,data参数可以用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包导致的问题。可以参考 .bind()的讨论来获得更多信息。


参数

typeString     事件类型

data(可选)    Object          欲绑定的事件处理函数

fn                  Function        欲绑定的事件处理函数


示例

HTML 代码:

<p>Clickme!</p>

jQuery 代码:
    $("p").live("click", function(){
         $(this).after("<p>Anotherparagraph!</p>");
    });

 

描述:

阻止默认事件行为和事件冒泡,返回false

jQuery 代码:
        $("a").live("click",function() { return false; });

 //根本原因在这,需要阻止默认事件行为和事件冒泡,在代码后面添加return false;就OK了

 

分享到:
评论

相关推荐

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

    本篇文章主要是对jquery中live()重复绑定的解决方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助

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

    一 $.fn.live 重复绑定 解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件。 代码如下://先通过die()方法解除,再通过live()绑定$(“#selectAll”...

    jQuery中live方法的重复绑定说明

    解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件。 代码如下: //先通过die()方法解除,再通过live()绑定 $(“#selectAll”).die().live(“click...

    jQuery:bind() delegate() live()事件绑定

    jQuery:bind() delegate() live()事件绑定

    jquery使用on绑定a标签无效 只能用live解决

    下面小编就为大家带来一篇jquery使用on绑定a标签无效 只能用live解决。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...

    jquery.livequery.js

    jquery.livequery.js是jquery中的动态绑定事件所需的plugins

    【JavaScript源代码】JQuery绑定事件四种实现方法解析.docx

     jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率...

    解析jQuery的三种bind/One/Live事件绑定使用方法

    本篇文章主要是对jQuery的三种bind/One/Live事件绑定使用方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    jQuery事件绑定和委托实例

    jQuery事件的绑定和委托可以用多种方法实现,on() 、 bind() 、 live() 、 delegate() ,还有one()。   有时我们可能会像下面这样绑定一个事件: 代码如下:$(“#div1”).click(function() {   alert&#40;...

    jquery中live()方法和bind()方法区别分析

    本文实例讲述了jquery中live()方法和bind()方法区别。分享给大家供大家参考,具体如下: live()不受加载时间顺序的影响,只要查找能够配对上就能够绑定对应的...注:die()方法是解除live绑定的方法 $("#manual_discon

    jQuery中绑定事件bind() on() live() one()的异同

    本文主要介绍了jQuery中绑定事件bind() on() live() one()的异同,具有很好的参考价值,下面跟着小编一起来看下吧

    Jquery绑定事件(bind和live的区别介绍)

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind(“click”,function(){}); (3)target.live(“click”,function(){}); 第一种方法很好理解,其实就和普通JS的...

    jQuery页面元素动态添加后绑定事件丢失方法,非 live

    代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 &lt;input type=button value=Add name=test_but /&gt; &lt;div id=test_div&gt;&lt;input name=test_input/&gt; [removed] $('...

    jQuery的三种bind/One/Live/On事件绑定使用方法

    jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用

    详解jQuery向动态生成的内容添加事件响应jQuery live()方法

    jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。 这个方法可以看做是 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配...

    JQuery绑定事件四种实现方法解析

    jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率较高...

Global site tag (gtag.js) - Google Analytics