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')
  }
});