Jquery中bind和live的区别
3个回答
展开全部
Jquery中bind和live的区别如下:
1.bind()可以绑定多个事件,live()一次只能绑定一个事件。
区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
2.live 目前只支持所有事件的子集,支持列表参考上面的说明。
.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
.live 没有”setup”和”cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。
1.bind()可以绑定多个事件,live()一次只能绑定一个事件。
区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
2.live 目前只支持所有事件的子集,支持列表参考上面的说明。
.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
.live 没有”setup”和”cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。
展开全部
以click事件为例
Jquery中绑定事件有三种方法:
1、target.click(function(){});
2、target.bind("click",function(){});
3、target.live("click",function(){});
live方法,只有在click事件发生的时候,才会去检测绑定事件的对象target是否存在,所以live方法可以实现后来新增子元素的事件的绑定。
bind会在事件在绑定阶段bind时就会判断绑定事件的对象target是否存在,而且只针对当前元素进行绑定,而不是绑定到父节点上。
以下举例。
按钮1会触发bind和live的绑定事件。
按钮2会触发live的绑定事件。不会触发bind的事件,因为绑定click事件的时候按钮2还没有生成。
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
$(function () {
$("#btn1").bind("click", function () { alert("bind"); });
$("#btn2").bind("click", function () { alert("bind"); });
$("#btn1").live("click", function () { alert("live"); });
$("#btn2").live("click", function () { alert("live"); })
$("body").append("<span id=\"btn2\">按钮2</span>")
});
</script>
<body>
<span id="btn1">按钮1</span>
</body>
Jquery中绑定事件有三种方法:
1、target.click(function(){});
2、target.bind("click",function(){});
3、target.live("click",function(){});
live方法,只有在click事件发生的时候,才会去检测绑定事件的对象target是否存在,所以live方法可以实现后来新增子元素的事件的绑定。
bind会在事件在绑定阶段bind时就会判断绑定事件的对象target是否存在,而且只针对当前元素进行绑定,而不是绑定到父节点上。
以下举例。
按钮1会触发bind和live的绑定事件。
按钮2会触发live的绑定事件。不会触发bind的事件,因为绑定click事件的时候按钮2还没有生成。
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
$(function () {
$("#btn1").bind("click", function () { alert("bind"); });
$("#btn2").bind("click", function () { alert("bind"); });
$("#btn1").live("click", function () { alert("live"); });
$("#btn2").live("click", function () { alert("live"); })
$("body").append("<span id=\"btn2\">按钮2</span>")
});
</script>
<body>
<span id="btn1">按钮1</span>
</body>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2016-04-17 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
展开全部
live()方法用法详解:
此方法的在jQuery中使用率相当高,并且具有独特的特点,且从其语法结构上不能够看出此方法的独特之处,下面就通过实例详细介绍一下次方法的用法。先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.00h5.com/" />
<title>零零H5</title>
<style type="text/css">
span{
color:green;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").live("click",function(){
$("span").text("太阳出来了");
})
})
</script>
</head>
<body>
<div>零零H5</div>
<span></span>
</body>
</html>
此方法的在jQuery中使用率相当高,并且具有独特的特点,且从其语法结构上不能够看出此方法的独特之处,下面就通过实例详细介绍一下次方法的用法。先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.00h5.com/" />
<title>零零H5</title>
<style type="text/css">
span{
color:green;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").live("click",function(){
$("span").text("太阳出来了");
})
})
</script>
</head>
<body>
<div>零零H5</div>
<span></span>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询