JS动态append之后点击事件无效

最新推荐文章于 2024-09-27 09:43:20 发布

喜羊羊咯

最新推荐文章于 2024-09-27 09:43:20 发布

阅读量2k

点赞数 1

分类专栏： JS webstorm

本文链接：https://blog.csdn.net/weixin_45127183/article/details/91128607

版权

在项目中使用append动态添加HTML结构后，发现点击事件无法触发。原因是append的节点在文档加载后添加，因此点击事件未被初始化。解决办法是采用事件代理，将事件绑定到共同父级元素上，通过class名判断并执行相应操作。

摘要由CSDN通过智能技术生成

今天做项目用了append向HTML里面添加结构代码，代码添加之后，单击事件就没反应了。搞得我一脸懵逼，调了代码很久实在不行，我百度了一下才发现，append添加的节点单击事件是不会生效的。
原因：
原来append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效。
解决方法：
于是我只好改用事件代理来完成这次我的项目，把这次经历发在上面存一下档了，希望下次能记住。
HTML代码：

<main class="container" style="margin-top: 50px;margin-bottom: 50px">
    <div class="row content" id="content">

    </div>
</main>

append的代码：我把下面这段代码，加在content里面

  $('#content').append(`
       <div class="col-md-6">
          <img src="img/cart.png" class="addcart">
       </div>
       <div class="col-md-6">
           <img src="img/buy.png" class="buy">