<div class="iteye-blog-content-contain" style="font-size: 14px;">
<p><span style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: small;"><span style="font-weight: bold;">为什么live()方法不起作用了:</span></span><br style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun;"><span style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: small;">jQuery的live()方法用于给匹配元素绑定事件处理函数，由于在很多情况下执行效率要比bind()方法要高，所以使用的频率也越来越高，但是有时候却不起作用，尽管代码貌似没有任何错误，可能导致这种情况的原因有多种，下面就介绍一下比较常见的一种。</span><br style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun;"><span style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: small;">先看一段bind()方法的实例:</span></p>
<p><span style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: small;"></span></p>
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul li {
width: 200px;
height: 26px;
list-style: none;
line-height: 26px;
font-size: 12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
jQuery.mouseOverColor = function (ulid) {
$(ulid).find("li").first().bind("mouseover", function () {
$(this).css("background-color", "green")
}).bind("mouseleave", function () {
$(this).css("background-color", "")
})
}
$.mouseOverColor("#mytest")
})
</script>
</head>
<body>
<div>
<ul id="mytest">
<li>俄罗斯图95轰战机巡航冲绳岛</li>
<li>韩国爆发大规模</li>
</ul>
</div>
</div>
</body>
</html></pre>
<p><span style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: small;"> 以上代码任何问题，当鼠标移到第一个li元素的时候，能够实现背景颜色的改变。live()方法和bind()方法的功能类似，下面让live()来替代bind()方法实现上述功能，代码修改如下:</span></p>
<p><span style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: small;"></span></p>
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul li {
width: 200px;
height: 26px;
list-style: none;
line-height: 26px;
font-size: 12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
jQuery.mouseOverColor = function (ulid) {
$(ulid).find("li").first().live("mouseover", function () {
$(this).css("background-color", "green")
}).live("mouseleave", function () {
$(this).css("background-color", "")
})
}
$.mouseOverColor("#mytest")
})
</script>
</head>
<body>
<div>
<ul id="mytest">
<li>俄罗斯图95轰战机巡航冲绳岛</li>
<li>韩国爆发大规模</li>
</ul>
</div>
</div>
</body>
</html></pre>
<p><span style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: small;"> <span style="font-size: small;">上面的代码将第一个段实例中的bind()替换为live()，令人奇怪的是代码失效了。这是因为live()并不完全支持通过DOM遍历的方法找到的元素。取而代之的是，应当总是在一个选择器后面直接使用live()方法。从jQuery1.7就不推荐使用live()方法，建议使用</span><span style="font-size: small;">delegate()和on()等方法替代。</span></span></p>
<p><span style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: small;"><span style="font-size: small;">原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=5799</span></span></p>
<p><span style="color: #444444; font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: small;"><span style="font-size: small;">更多内容可以参阅:http://www.softwhy.com/jquery/</span></span></p>
</div>
为什么live()方法不起作用了
猜你喜欢
转载自softwhy.iteye.com/blog/2262165
今日推荐
周排行