콘솔창에선 되는데 js로는 안됩니다.

[이정현]

 append --------------------------------------------------------------
   $('.row').append(
        `<div class="col-sm-4 hide" id=${e[i].id}>
            <h5>${e[i].title}</h5>
            <p>${e[i].price}</p>
            <button class="buy">담기</button>
        </div>`
        );

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

또는
    $('.col-sm-4').on('click','.buy',function(){ ...
    $('.buy').click(function(){ ...
button에 아이디 buy를 추가하여
    $('#buy').on(...)...
    $('#buy').click(...)...

어떠한 방법으로도 오류가 생기는 것도 아니고 그냥 작동이 아예 안됩니다.
또한 위의 코드를 이용하여 크롬 실행시 어떠한 오류도 뜨지 않습니다.

그런데

크롬 개발자 도구의 console창에
    $('.buy').on('click',function(e){
      var title = $(e.target).siblings('h5').text();
      console.log(title);
    })
이 코드를 작성하여 입력하면 작동이 잘됩니다.
다른 예시도 동일합니다.

이 현상 때문에 여러가지 수정을 해보다가 button onclick=func() 방식으로는 작동이 잘되어
현재 임시방편으로 넘어간 상태입니다.

검색도 이것저것 해보았지만 도저히 해결할 수 없어 글을 남기게 되었습니다.

[codingapple]

<button class="buy"> 생성하고나서 $('.buy').on('click' 달아줍시다 먼저달면 안됩니다

[이정현]

한 동안 일이 있어서 이제서야 확인하고 재질문 드립니다.

자동으로 생성되게 만들어 구글 개발자도구의 elements 창에는
<div class="col-sm-4" id="5">
            < img src="https://via.placeholder.com/600" class="w-100">
            <h5>Sleeveless Racer</h5>
            <p>30000</p>
            <button class="buy">담기</button>
        </div>
이렇게 생성되어 있습니다.
허나
$('.buy').on('click',function(e){
      var title = $(e.target).siblings('h5').text();
      console.log(title);
})
이 방식은 실행이 되지 않습니다.

$(document).on('click','buy',function(e){
      var title = $(e.target).siblings('h5').text();
      console.log(title);
})
이 방식은 실행이 되는데 차이점이 무엇일까요?

[codingapple]

html 생성되기 전에 .buy에 이벤트리스너 달아달라고 해서 그런듯요

[글쓴이]

글