事件委托一般用于动态生成的元素中使用,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.item{
width:100px;
height:100px;
background:#1ABC9C;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div>
<ul>
<li class="item">
<div class="title">
今天天气不错
</div>
<p class="desc">xxxxxxs</p>
</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li> </ul>
</div>
<script type="text/javascript">
$(function(){
var lio = "<li class='item'>5</li>";
$("ul").append(lio); $("li.item").click(function(){
/*动态生成的li5 是不会执行点击事件*/
})
}) </script>
</body>
</html>
解决这个问题我们就要利用事件捕捉的原理
$(function(){
$("div > ul").on("click",function(event){
var e = event.target;
/*事件委托*/
if( e.className == "item"){
alert("li.item");
}
});
var lio = "<li class='item'>5</li>";
$("ul").append(lio);
})
在上面解决的方案中,并不是直接给li绑定事件,而是给所有的li父级元素绑定事件.根据事件扑捉的原理,事件会自上而下传递给li,
我们只需要通过一些简单的条件判断来确定我们的目标元素即可;