jQuery中.live()方法的用法深入解析_jquery
更多详情还见官网 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、由于没有事件处理函数直接绑定在 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 代码: jQuery 代码: Another paragraph! "); 阻止默认事件行为和事件冒泡，返回false jQuery 代码: 仅仅阻止默认事件行为 jQuery 代码: 声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。 相关文章 相关视频 全栈 170W+ 主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门 入门 80W+ 主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门 实战 120W+ 主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
附加说明
参数
示例
Click me!
$("p").live("click", function(){
$(this).after("
});
描述:
$("a").live("click", function() { returnfalse; });
描述:
$("a").live("click", function(event){
event.preventDefault();
});
专题推荐
独孤九贱-php全栈开发教程
玉女心经-web前端开发教程
天龙八部-实战开发教程
上一篇： php上传图片
下一篇： nginx181配置反向代理
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论