jQuery中bind与live的用法及区别小结_jquery
程序员文章站
2022-05-16 13:42:49
...
首先介绍这两个方法之前,我们常用的是click()方法
$("a").click(function() {
alert("hello");
});
click()方法是bind()方法的一种简单方法。在bind()中,
jQuery所有JavaScript事件对象,比如focus, mouseover,和resize,
都是可以作为type参数传递进来的。
$("p").bind("click",function(){
alert("hello");
})
也可以传参
var message = "how are you!";
$("p").bind("click",{msg:message},function(e){
alert(e.data.msg);
})
live()给所有匹配的元素附加一个事件处理函数,
即使这个元素是以后再添加进来的也有效。如下:
Click me
点击Clike me 会弹出hello
$(".mytr").after("后加的 ");
这时 再使用bind点击"后加的"不会执行
改为使用live()方法
$(".mytd").live("click",function(){
alert("hello");
})
.live()方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:
绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。
传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
复制代码 代码如下:
$("a").click(function() {
alert("hello");
});
click()方法是bind()方法的一种简单方法。在bind()中,
jQuery所有JavaScript事件对象,比如focus, mouseover,和resize,
都是可以作为type参数传递进来的。
参数:type,[data],function(eventObject)
例如:
复制代码 代码如下:
$("p").bind("click",function(){
alert("hello");
})
也可以传参
复制代码 代码如下:
var message = "how are you!";
$("p").bind("click",{msg:message},function(e){
alert(e.data.msg);
})
live()给所有匹配的元素附加一个事件处理函数,
即使这个元素是以后再添加进来的也有效。如下:
复制代码 代码如下:
$(".mytd").bind("click",function(){
alert("hello");
})
点击Clike me 会弹出hello
此时添加一个新的元素进来
复制代码 代码如下:
$(".mytr").after("
这时 再使用bind点击"后加的"不会执行
改为使用live()方法
复制代码 代码如下:
$(".mytd").live("click",function(){
alert("hello");
})
.live()方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:
绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。
传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
推荐阅读
-
深入理解jQuery中live与bind方法的区别
-
jQuery中delegate与on的用法与区别示例介绍
-
jQuery中bind,live,delegate与one方法的用法及区别解析
-
jQuery中的on与bind绑定事件区别实例详解
-
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
-
JQuery中click(),bind(),live(),delegate()的区别
-
jQuery中bind与live的用法及区别小结
-
jQuery中delegate和on的用法与区别详细解析
-
全面解析jQuery中的$(window)与$(document)的用法区别
-
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解