jQuery绑定动态元素的点击事件无效

示例以下：

<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()); });

经过运行以上代码，就会发现动态生成的标签事先绑定的点击事件点击了没反应。总结一下,推测上面这个监听函数，是在网页加载的时候就指定了对象,而经过代码追加，如经过js追加的元素，是不能匹配这个事件的。那么，咱们应该使用什么来绑定动态元素呢，支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7以后就不推荐使用了。如今主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，能够放在on的第二个参数里面。

正确示范：

$("#demo").on('click', 'li',function(){ alert($(this).html()); });