事件委托一般用于动态生成的元素中使用,如下:
<!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,
我们只需要通过一些简单的条件判断来确定我们的目标元素即可;