jQuery中.live()方法的使用方法

谁践踏了优雅 2024-04-17 05:21 35阅读 0赞

给jquery动态生成的页面元素添加事件？使用livequery插件，或可以使用jquery的live方法。摘录一段live简单使用方法。

更多详情还见官网 [http://api.jquery.com/live/][http_api.jquery.com_live]

live(type, \[data\],fn)

概述

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

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

Click here

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

$('.clickme').bind('click', function() {         alert("Bound handler called.");      });

当点击了元素，就会弹出一个警告框。

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

$('body').append('

Another target

');

尽管这个新的元素也能够匹配选择器".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。

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

$('.clickme').live('click', function() {         alert("Live handler called.");       });

然后再添加一个新元素：

$('body').append('

Another target

');

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

事件委托

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

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

1、生成一个click事件传递给

来处理

2、由于没有事件处理函数直接绑定在

上，所以事件冒泡到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 代码:

Click me!

jQuery 代码:  
    $("p").live("click", function()\{  
         $(this).after("

Another paragraph!

");  
        \});

描述:

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

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

描述:

仅仅阻止默认事件行为

jQuery 代码:  
      $("a").live("click", function(event)\{  
           event.preventDefault();  
      \});

[http_api.jquery.com_live]: http://api.jquery.com/live/

发表评论取消回复

表情：

评论列表（有 0 条评论，35人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery中.live()方法的使用方法

jquery动态生成的页面元素添加事件？使用livequery插件，或可以使用jquery的live方法。摘录一段live简单使用方法。更多详情还见官网 [http:...

谁践踏了优雅/ 2024年04月17日 05:21/ 0 赞/ 36 阅读

相关学习使用jQuery中的hover方法

学习使用jQuery中的hover方法定义和用法语法实例定义和用法 hover() 方法规定当鼠标指针悬停在被选元

Love The Way You Lie/ 2022年09月10日 10:22/ 0 赞/ 137 阅读

相关学习使用jQuery中的on() 方法

学习使用jQuery中的on方法向 p元素添加 click 事件处理程序定义和用法向 p元素添加 click 事件处理程序

小咪咪/ 2022年09月05日 12:56/ 0 赞/ 132 阅读

相关 jquery中的slice方法（个人使用总结）

\-、slice(start\[,end\]) 这个方法是用来选取一个匹配的子集 start是指开始选取子集的位置，第一个元素是0，即下标。如果是负数，则可以从集合

悠悠/ 2022年08月21日 00:29/ 0 赞/ 132 阅读

相关 jquery中attr()方法的使用

jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。

墨蓝/ 2022年06月15日 06:22/ 0 赞/ 176 阅读

相关 jQuery中 (function($){…})(jQuery)方法使用

刚刚学习jQuery看到这个方法有点蒙圈，代表什么意思呢？我们从JavaScript中匿名函数说起： JavaScript中匿名函数的声明与调用 function(ar

「爱情、让人受尽委屈。」/ 2022年06月11日 06:44/ 0 赞/ 151 阅读

相关 JQuery中的html()方法

jquery中html方法 html()方法 > This method is not available on XML documents. > >

拼搏现实的明天。/ 2022年06月06日 01:28/ 0 赞/ 165 阅读

相关【jQuery】slice()方法的使用

【jQuery】slice()方法的使用 slice()方法：从已有的数组中返回选定的元素。语法： arrayObj.slice(start,

￡神魔★判官ぃ/ 2022年06月03日 00:38/ 0 赞/ 148 阅读

相关 jQuery中filter方法的简单使用

1、举个简单的栗子：我们想给select标签在页面初始化完成后设置一个默认值，咱们一般用简单的循环去实现元素节点的查找（比较浪费性能），当前可以通过jQuery选

亦凉/ 2022年01月14日 12:55/ 0 赞/ 210 阅读

相关 JQuery中的prop()方法的使用

在之前的 JQuery 版本中，都是使用 attr() 来访问对象的属性，比如取一个图片的 alt 属性，就可以这样做 $("\img").attr("alt")；但是在某些时

ゝ一世哀愁。/ 2021年07月24日 13:31/ 0 赞/ 393 阅读