标签：jQuery function 元素 demo 绑定 示范 点击 li click

之前就一直受这个问题的困扰，在写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();
 })

标签：jQuery,function,元素,demo,绑定,示范,点击,li,click
来源： https://blog.51cto.com/15142266/2680137

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。