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

最新推荐文章于 2023-10-20 15:29:44 发布

cdgogo

最新推荐文章于 2023-10-20 15:29:44 发布

阅读量570

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/qq_36699230/article/details/104001063

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章