장바구니 숙제 중 질문 있습니다.

안녕하세요 선생님 ! 숙제 중에 질문이 있습니다!
장바구니 숙제 중 만들어둔 카드를 array forEach반복문으로 
$('.row').append(템플릿) 추가한 요소들은 
$('.buy').click()이 적용되지 않아서 이렇게 저렇게 해보았는데 답을 못찾았습니다.


구매버튼을 눌렀을때 콘솔창에 1이 출력되도록 해놓고,
구매버튼을 눌러보면 처음에 자바스크립트로 생성한 3개의 버튼은 잘 확인이 되는데
그 밑에 더보기로 추가하거나 새롭게 정렬하면 버튼의 클릭이벤트가 적용이 안되는 것 같아요.
그 위의 카드 클래스인 $('.col-sm-4') 도 적용이 안되는데  $('.row')부터는 되더라구요 

row안에 다 지우고 append로 추가하는 코드는 이렇게 작성했습니다.
$('.row').html('');
dataname.forEach(function(a,i){
      var 템플릿 = `
        <div class="col-sm-4 카드${i}">
          <img src="https://via.placeholder.com/600" class="w-100" alt="">
          <h5>${a.title}</h5>
          <p>가격 : ${a.price}</p>
          <button class="buy">구매</button>
        </div>`
      $('.row').append(템플릿);
    });

row클래스 안에 지우고 append로 템플릿을 넣은 이 부분이 안되는 것 같은데 원래 이런건가요?
아님 코드를 잘못짠걸까요?

그래서 테스트를 해보았는데 

주황박스 3개는 html로 만들어놓고
추가버튼을 누르면 append로 템플릿을 넣어 박스가 3개씩 만들어지게 했습니다.
그리고 박스를 누르면 콘솔창에 1이 출력되도록 했는데요,


카드에서 그랬던 것처럼 처음에 만들어둔 3개의 박스만 적용이되고 
밑에 박스들은 클래스명이 잘 달려있는데도 체크가 안됩니다!
이유가 뭘까요 ,,??