구매버튼누르면 상품명을 localStorage에 저장

[주상후]

카드작성은 이렇게 하였고
var card = `<div class="col-sm-4">
                    <img src="https://via.placeholder.com/600" class="w-100">
                    <h5 id='asdf'>${item.title}</h5>
                    <p>가격 : ${item.price}</p>
                    <button class="buy">구매</button>
                  </div>`;
                  $('.row').append(card);
스크립트는 이렇습니다.
$('.buy').click(function(e) {

        var title = $(e.target).siblings('h5').text();
        console.log(title);
      });

코드가 작동하지 않아서 스크립트의 내용을 

$('.row').click(function(e) {

        var title = $(e.target).siblings('h5').text();
        console.log(title);
      });
로 바꾸면 매우 잘 작동합니다.

console.log()로 잘못 누른것은 아닌지 여러번 확인해봤지만 이상한 점은 없었습니다.

[codingapple]

.buy 버튼을 생성하고 나서 $('.buy').click() 을 실행해야 이벤트리스너가 잘 부착됩니다

[주상후]

$('.btn-danger').on('click',function() {
          $.get('https://codingapple1.github.io/js/more1.json')
            .done(function(data) {
              show(data);
            })
        }
      )

      function show(data) {
        data.forEach(function(item) {
                var card = `<div class="col-sm-4">
                    <img src="https://via.placeholder.com/600" class="w-100">
                    <h5 id='asdf'>${item.title}</h5>
                    <p>가격 : ${item.price}</p>
                    <button class="buy">구매</button>
                  </div>`;
                  $('.row').append(card);
        })
      }
이렇게 더보기 버튼($.('.btn-danger'))을 누르면 버튼 등을 포함한 카드가 생성된 것 아닌가요? 
그 후에 $('.buy').click()을 실행하여도 작동이 되질 않습니다.
아니면 스크립트의 순서를 바꿔야 하는 것인가요?
============추가=============

$(document).on('click', '.buy', function(e) {
        console.log($(e.target).siblings('h5').text());
        var title = $(e.target).siblings('h5').text();
      });

구글링 하여 위와 같이 바꾸니 실행이 잘 되었습니다.
이에 대해 한번만 설명해주실 수 있나요?

[codingapple]

forEach 반복문 끝나고 바로 $('.buy').click() 넣으면 잘될듯요 
body태그에 이벤트리스너 달아놓는데 e.target이 .buy면 실행하라는 뜻입니다

[글쓴이]

글