`
axl234
  • 浏览: 267957 次
  • 性别: 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()重复绑定的解决方法介绍

    在实际应用中,如果使用live()方法重复绑定事件而导致问题,可以考虑以下解决方法: 1. 使用 delegate() 或 on() 方法替代live()方法。这些方法提供了更灵活的事件委托机制,允许在父元素上为子元素绑定事件,而且...

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

    文章中还提供了一段测试代码,通过不同的按钮测试`.click()`和`.live()`方法在重复绑定时的表现,验证了使用`.die()`和`.unbind()`方法解决重复绑定问题的有效性。 总结来说,处理jQuery事件重复绑定的关键是识别并...

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

    在探讨jQuery中元素重复绑定的问题之前,我们需要了解事件绑定在jQuery中的基本原理。在jQuery中,事件可以通过bind()方法绑定到指定的元素上。比如,当我们使用$('.test').bind('click', function() {...})时,意指...

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

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

    JQuery绑定事件

    **jQuery绑定事件**是JavaScript库jQuery中的核心功能之一,它极大地简化了DOM元素事件处理的流程,使得开发者能够更加高效地编写代码。在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`...

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

    在探讨jQuery中的`bind()`, `delegate()`, 和`live()`事件绑定方法的区别时,我们需要深入理解它们在处理DOM事件时的独特方式。这些方法在不同的场景下提供了灵活且高效的选择,帮助开发者创建响应式和动态的Web应用...

    jquery绑定事件不生效的解决方法

    首先,在jQuery中,绑定事件主要使用`.bind()`方法,这是早期jQuery版本中用于替代`.live()`, `.delegate()`等方法的事件绑定方式。随着版本的更新,jQuery推荐使用`.on()`方法作为绑定事件的主要方式。在新版本中,...

    JQuery调用绑定click事件的3种写法

    `.on()`是jQuery 1.7版本引入的新方法,它取代了`.bind()`、`.live()`和`.delegate()`,提供了更强大的功能。`.on()`方法可以处理当前及未来的元素(动态生成的元素)的事件,这使得它在处理动态内容时非常有用。...

    前端项目-jquery.liveurl.zip

    接下来,你需要创建一个HTML元素作为预览区域,并为其绑定jQuery LiveUrl插件。这可以通过调用`.liveurl()`方法完成: ```html &lt;div id="preview"&gt;&lt;/div&gt; $(document).ready(function() { $('#urlInput').live...

    浅谈Jquery为元素绑定事件

    在Jquery中,我们可以通过多种方式为元素绑定事件,例如使用bind()方法、live()方法、delegate()方法和on()方法。随着Jquery版本的演进,live()和delegate()方法已经被on()方法所取代,因为on()方法提供了更灵活的...

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

    `live()`方法是早期jQuery版本中解决类似问题的一种方法,它同样实现了事件委托。然而,`live()`在jQuery 1.7版本后已被废弃,因为它可能导致性能问题,尤其是在处理大量元素时。因此,推荐使用`on()`方法来替代`...

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

    为此,在 jQuery 的早期版本中引入了 live() 和 delegate() 方法来解决这个问题。 live() 方法在 jQuery 版本小于 1.7 中有效,它允许你为当前和未来的元素绑定事件,即使这些元素是稍后动态添加到 DOM 中的。使用 ...

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

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

    jquery live()调用不存在的解决方法

    在jQuery的早期版本中,`live()`方法是一个非常实用的功能,它允许我们为当前页面以及未来动态添加到DOM中的元素绑定事件处理程序。然而,随着jQuery的不断进化,`live()`方法在版本1.7中被弃用,并最终在版本1.9中...

    jQuery事件绑定方法学习总结(推荐)

    总结起来,jQuery的事件绑定方法各有特点,`bind()`适用于静态元素的简单绑定,`delegate()`和`live()`则为动态元素提供解决方案,而`on()`则是目前最全面且推荐的事件绑定方法。在实际开发中,应根据项目需求和性能...

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

    3. **live**:`live()` 主要是为了解决动态添加的元素无法绑定事件的问题。它能够监听所有符合选择器的当前及未来元素的事件,无论这些元素何时被添加到DOM中。例如,使用`$('a').live('click', function() {...})`...

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

    `live()`是jQuery的一个创新,它允许动态绑定事件,即不仅对现有元素有效,对将来添加到DOM中的元素也有效。`live()`通过在文档级别捕获事件,然后根据选择器判断是否向下传播事件,提高了效率。由于性能和设计上的...

    jquery.livequery.js

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

Global site tag (gtag.js) - Google Analytics