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

解决jQuery动态元素点击事件失效问题

最新推荐文章于 2021-11-26 10:18:33 发布

原创

最新推荐文章于 2021-11-26 10:18:33 发布 · 590 阅读

5 ·

CC 4.0 BY-SA版权

当使用jQuery处理动态加载的数据时，发现追加的元素点击事件不起作用。问题在于，预先绑定的事件无法作用于后期添加的DOM。解决方法是使用`on`方法，而不是已废弃的`live`。正确做法是确保`on`前的元素在页面加载时存在，动态元素和事件绑定在`on`的第二个参数中进行。

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