jQuery中.live()方法的用法深入解析

news/2025/5/24 0:54:36

概述
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事件传递给<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 代码:

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();});

https://dhexx.cn/news/show-843998.html

相关文章

英国人的名字

年轻学英语时&#xff0c;总是碰见英文名字“玛丽”、“艾丽斯”、“乔治”、“杰克”等&#xff0c;当时并没多想&#xff0c;以为这些常见的英文名字和一些常出现在数学应用题里的中文名字“小明”、“小强”、“小华”等一样&#xff0c;只是因为简单而常被举例而已&#xf…

hdu1711 Number Sequence

http://acm.hdu.edu.cn/showproblem.php?pid1711 KMP的简单应用啊 直接贴代码了 代码&#xff1a; 1 #include<iostream>2 #include<stdlib.h>3 #include<stdio.h>4 using namespace std;5 #define maxn 10000106 int n,m;7 int a[maxn],b[maxn];8 int f[ma…

窗口拖动的大小范围限制

以前见过&#xff0c;如果每次拖动都要自己根据判断来对对话框进行排版&#xff0c; 就添加OnNcHitTest来判断点击的区域&#xff0c;再用OnLbuttonDown来响应&#xff0c;反正是有点没搞懂的。。 今天见到一种比较简单的方法&#xff0c;也是添加消息响应函数&#xff0c; 在…

Excel 公式复制同步到其他单元格

打开Excel表格&#xff0c;选中一个单元格&#xff0c;输入公式&#xff0c;然后选中输入公式的单元格及同行或同列的单元格&#xff0c;在“开始”选项卡的“编辑”组中单击“填充”按钮&#xff0c;在展开的下拉列表中选择“向下”选项&#xff0c; 到此 Excel 公式复制同步到…

手脱ASProtect v1.23 RC1(无Stolen Code)

1.载入PEID ASProtect v1.23 RC12.载入OD&#xff0c;不勾选内存访问异常&#xff0c;其他异常全部勾选 00401000 > 68 01C04200 push 跑跑排行.0042C001 ; //入口处 00401005 E8 01000000 call 跑跑排行.0040100B 0040100A C3 …

Android:@id和@+id

id代表引用已有的id&#xff0c;而id是新增加一个id 如果使用id/name形式&#xff0c;当R.java中存在名为name变量时&#xff0c;则该组件会使用该变量的值作为标识。如果不存在该变量&#xff0c;则添加一个新的变量&#xff0c;并为该变量赋相应的值&#xff08;不会重复&…

js插件开发的一些感想和心得-引狼狼的蓝胖子

起因 如果大家平时做过一些前端开发方面的工作&#xff0c;一定会有这样的体会&#xff1a;页面需要某种效果或者插件的时候&#xff0c;我们一般会有两种选择&#xff1a; 1、上网查找相关的JS插件&#xff0c;学习其用法 2、自己造轮子&#xff0c;开发插件。 寻找存在的插件…

.NET:Attribute 入门(内训教程)

背景 接触过的语言中&#xff0c;C#&#xff08;.NET 平台的多数语言都支持&#xff09;、Java 和 Python 都支持这个特性&#xff0c;本文重点介绍 C# 中的应用&#xff0c;这里简单的对 C#、java 和 Python 中的 Attribute 做个总结&#xff1a; C#&#xff1a;可以封装状态和…

Linux Shell常用技巧(七) find xargs

Linux Shell常用技巧(七) find xargs 十六. 文件查找命令find: 下面给出find命令的主要应用示例&#xff1a; /> ls -l #列出当前目录下所包含的测试文件 -rw-r--r--. 1 root root 48217 Nov 12 00:57 install.log -rw-r--r--. 1 root root 37 Nov 12 …

OSG最长一帧学习

1.void ViewerBase::frame(double simulationTime)  //OSG每帧调用的函数&#xff08;ViewBase.cpp&#xff09; 转载于:https://www.cnblogs.com/baipengchao/p/5237646.html