live()方法用法详解
摘要：live()方法用法详解:此方法的在jQuery中使用率相当高，并且具有独特的特点，且从其语法结构上不能够看出此方法的独特之处，下面就通过实例详细介绍一下次方法的用法。先看一段代码实例:蚂蚁部落蚂蚁部落以上代码中，当点击div的时候会执行一个事件处理函数，为span元素设置文本内容，就像jQuery...
live()方法用法详解:
此方法的在jQuery中使用率相当高，并且具有独特的特点，且从其语法结构上不能够看出此方法的独特之处，下面就通过实例详细介绍一下次方法的用法。先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>蚂蚁部落</div>
<span></span>
</body>
</html>
以上代码中，当点击div的时候会执行一个事件处理函数，为span元素设置文本内容，就像jQuery API手册开头所说，此方法可以为匹配元素附加一个事件处理函数，但是事实并非如此，事件处理函数并没有被绑定匹配的div元素上，而是被绑定到了DOM树的顶层document上，任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的触发元素是否为div，如果条件满足的话，就执行附加的事件处理函数。live()方法的实现方式其实就是事件委托，对于提高代码的执行效率有着很大的帮助。当然事件处理方法并非只能帮顶到document元素上，可以人为的指定要绑定的DOM元素。代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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(){
$("p",$("#myul")[0]).live("click",function(){
$("span").text("太阳出来了");
})
})
</script>
</head>
<body>
<div>
<ul id="myul">
<li>
<p>蚂蚁部落</p>
</li>
</ul>
</div>
<span></span>
</body>
</html>
以上代码将事件处理函数绑定于ul上，而非绑定在document上。
对于新添加的元素也是有效的:
在实际应用中，可能需要根据条件添加新的元素，live()方法对新添加的匹配元素也是有效的。代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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("太阳出来了");
})
$("button").click(function(){
$("span").after("<div>新添加的元素</div>");
})
})
</script>
</head>
<body>
<div>蚂蚁部落</div>
<span></span>
<button>添加新元素</button>
</body>
</html>
点击新添加的div元素依然能设置span元素中的文本内容，所以live()方法对于新添加的元素也是有效的，这一点bind()不能做到。
event.stopPropagation()不能阻止live()的事件冒泡:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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(){
$("p").live("click",function(e){
e.stopPropagation();
$("span").text("太阳出来了");
})
})
</script>
</head>
<body>
<div>
<ul id="myul">
<li>
<p>蚂蚁部落</p>
</li>
</ul>
</div>
<span></span>
</body>
</html>
由以上代码可以看出e.stopPropagation()并没有阻止事件处理函数的执行，所以并没有阻止事件冒泡。
最为原始地址是:http://www.softwhy.com/
相关文章
最新发布
阅读排行
热门文章
猜你喜欢