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

今天作项目用了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">
       </div>
 `);

最终效果：

事件代理：
思路：由于最开始他们共同的父级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')
  }
});