jQuery 绑定动态元素的点击事件无效
之前就一直受这个问题的困扰，在写 ajax 加载数据的时候发现，后面追加进来的 demo 节点元素，失去了之前的点击事件。为什么点击事件失效，我们该怎么去解决呢？那么，我们通过下面的示例简单说明。
示例如下：
<div> <ul id="demo"> <li>Kubernetes：下一代分布式系统的护戒使者</li> <li>机器学习工具--Pandas cheat sheet</li> <li>Android 8.0 正式版即将发布 谷歌还要建超人模型</li> ... //li是动态生成 </ul> </div>
<script type="text/javascript">
//动态像ul的末尾追加一个新元素
$("#demo").append('<li>Kubernetes：下一代分布式系统的护戒使者</li>');
$("#demo").append('机器学习工具--Pandas cheat sheet');
$("#demo").append('Android 8.0 正式版即将发布 谷歌还要建超人模型');
...
</script>错误示范：
// 示范一
$("#demo li").click(function(){
alert($(this).html());
});
// 示范二
$("#demo li").on('click',function(){
alert($(this).html());
});
//示范三
$("#picture_delete").on("click",function(){
$(this).parent().remove()
});
//示范四
$("#picture_delete").click(function(){
$(this).parent().remove()
});通过运行以上代码，就会发现动态生成的标签事先绑定的点击事件点击了没反应。总结一下，推测上面这个监听函数，是在网页加载的时候就指定了对象，而通过代码追加，如通过 js 追加的元素，是不能匹配这个事件的。那么，我们应该使用什么来绑定动态元素呢，支持给动态元素和属性绑定事件的是 live 和 on，其中 live 在 JQUERY 1.7 之后就不推荐使用了。现在主要用 on，使用 on 的时候也要注意，on 前面的元素也必须在页面加载的时候就存在于 dom 里面。动态的元素或者样式等，可以放在 on 的第二个参数里面。
正确示范：
//示范一
$("#demo").on('click', 'li',function(){
alert($(this).html());
});//示范二
$('body').on('click', '#picture_delete', function () {
$(this).parent().remove();
})
