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

深藏阁楼爱情的钟 2022-01-21 02:15 325阅读 0赞

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

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">
           </div>
     `);

最终效果：  
![效果图][1240]  
事件代理：  
思路：因为最开始他们共同的父级content是在HTML结构中的，所以将两个单击事件代理给content，通过单击获得的class名来判断点击的是哪一个对象，再进行具体操作

$('#content').on('click',function (e) {
      var target=e.target||e.srcElement;//获取当前点击的对象
      var cls=target.className;//获取当前点击对象的class名
      if(cls==='addcart'){//如果点击的是加入购物车
          console.log('addcart')
      }else if (cls==='buy') {//如果点击的是立即购买
          console.log('buy')
      }
    });

[1240]: /images/20220121/a30616807c834cba8ce0951ac6b921cb.png