1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
li{list-style: none;}
.list li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.list li:hover{
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<ul class="list"></ul>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//新生成元素
var arr=['香蕉','苹果','梨子'];
var lili='';
for(var i=0;i<arr.length;i++){
lili+='<li class="li">'+arr[i]+'</li>'
}
$(".list").html(lili);
//事件委托
// 父元素 ==》click事件名字=》新生成的子元素==》函数处理部分
$(".list").on("click",'li',function(){
console.log(arr[$(this).index()]);
});
//也可以通过classname
//$(".list").on("click",'.li',function(){
//console.log(arr[$(this).index()]);
//});
</script>
</body>
</html>2.效果（js新生成li，点击li打印出内容）
3.说明
① 新生成元素可用事件委托；
②当有多个子元素，而且为每个子元素添加点击事件，此时就可以考虑事件委托。