jQuery中.live()方法的用法

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

给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法。摘录一段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事件传递给<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();
 });

时间: 2024-09-24 11:27:22

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

jquery中one()方法的用法实例

 这篇文章主要介绍了jquery中one()方法的用法,实例分析了one()方法的功能及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery中one()方法的用法.分享给大家供大家参考.具体分析如下: jQuery中的one()方法:表示只执行一次,代码如下: 代码如下: <html> <head> <title>jquery事件:one()方法的使用</title> <script type="text/

jquery中load方法的用法及注意事项说明

 本篇文章主要是对jquery中load方法的用法及注意事项进行了详细介绍,需要的朋友可以过来参考下,希望对大家有所帮助 调用load方法的完整格式是:load( url, [data], [callback] ),其中  url:是指要导入文件的地址.  data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里.  callback:可选参数:是指调用load方法并得到服务器响应后,再执行的另

jquery中one()方法的用法实例_jquery

本文实例讲述了jquery中one()方法的用法.分享给大家供大家参考.具体分析如下: jQuery中的one()方法:表示只执行一次,代码如下: 复制代码 代码如下: <html> <head> <title>jquery事件:one()方法的使用</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script>

jquery中load方法的用法及注意事项说明_jquery

调用load方法的完整格式是:load( url, [data], [callback] ),其中 url:是指要导入文件的地址. data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里. callback:可选参数:是指调用load方法并得到服务器响应后,再执行的另外一个函数. 一:如何使用data 1.加载一个php文件,该php文件不含传递参数 $("#myID").load(

jQuery中delegate()方法的用法详解_jquery

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.下面我们具体来了解一下. 语法结构: 代码如下: $(selector).delegate(childofselector,type,data,function) 参数说明: childSelector 必需.规定要附加事件处理程序的一个或多个子元素. event 必需.规定附加到元素的一个或多个事件. 由空格分隔多个事件值.必须是有效的事件. data 可选.规定传递到函

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

给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法.摘录一段live简单使用方法. 更多详情还见官网 http://api.jquery.com/live/ live(type, [data],fn) 概述 jQuery给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效. 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为

jQuery中toggle()方法的用法

toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素:如果被选元素隐藏,则显示这些元素. $(selector).toggle(speed,callback,switch); 该方法又可分解为: $(selector).toggle(speed,callback);//参数可选 $(selector).toggle(switch);// switch为true时显示,switch为false时隐藏: Speed:调整动画状态:渐变对象宽高.透明度等: Callback:回

jQuery中animate方法简单用法

animate()方法提供了自定义的动画,能够实现更加新颖的动画效果,其语法结构:  代码如下 复制代码 $(element).animate({  param1: value1,  param2: value2},  speed, function() {  /* stuff to do after animation is complete */ }); 简单案例一: 单击侧面划入一个图层DIV2,单击DIV2关闭图层:  代码如下 复制代码 <!DOCTYPE html> <htm

jquery中post方法用法实例_jquery

本文实例讲述了jquery中post方法的用法,分享给大家供大家参考.具体用法分析如下: 在使用jquery实现网站的异步交互时,常用的两个函数为get和post方法,get方法使用很简单,直接提交get请求即可,如果有参数,直接追加到url后面就行,但是使用post方法时,传递参数,需要和url分开写,使得传参变得麻烦了,不过这样做起来更安全一些,而且出现中文乱码的概率也要低一些(get方法传中文很多情况下会出现乱码现象),这里就详细介绍一下post是怎样传递参数的. 首先写一个html代码如