자바스크립트 실전 예제 질문

[김윤재]

//장바구니에 아이템 추가
window.onload = function () {
    $('.buy').on('click', function (e) {

        let productId = e.target.dataset.id;

        let 몇번째 = cart.findIndex((a) => { return a.id == productId })

        if (몇번째 == -1) {
            let 현재상품 = products.find((a) => { return a.id == productId })
            현재상품.count = 1;
            cart.push(현재상품);
        } else {
            cart[몇번째].count++;
        }

        장바구니용템플릿삭제();

        $('.cart-text').remove()
        cart.forEach((a, i) => {
            var 템플릿 =
                `<div class="col-md-3 h-75" style="width: 250px; margin: 20px; padding: 20px;
                     background-color: white; display: inline-block; text-align: center;" >
                  < img src="${a.photo}" class="w-50">
                  <h5  class="fw-bold SearchTitle" style="margin-top: 10px;">${a.title}</h5>
                  <h6 style="color : gray;">${a.brand}</h6>
                  <p>${a.price}</p>
                  <input type="text" value="${a.count}">
                  </div>`;

            $('.Crow').append(템플릿);
        })
        console.log(cart);
        if (document.querySelector('.Crow').hasChildNodes()) {
            $('.priceResult').addClass("show");
        }
    })
}

//검색에 쓰는 코드
function 검색용템플릿생성(takeData) {
    var input글자 = $('.text').val();
    takeData.forEach(function (a, i) {
        var 타이틀 = takeData[i].title.replace(input글자, `<span style="background : yellow">${input글자}</span>`)
        var 템플릿 =
            `<div draggable="true" ondragstart="drag(event)" class="card col-sm-4 h-100" 
                style="width: 250px; margin: 20px; padding: 20px; background-color: white;"
                data-id="${takeData[i].id}" >
            < img src="${takeData[i].photo}" class="w-100">
            <h5 class="fw-bold SearchTitle" style="margin-top: 10px;">${타이틀}</h5>
            <h6 style="color : gray;">${takeData[i].brand}</h6>
            <p>가격 : ${takeData[i].price}</p>
            <button class="buy btn btn-dark" data-id="${takeData[i].id}">담기</button>
            </div>`;
        $('.row').append(템플릿);
    })
}
function 검색용템플릿삭제() {
    $('.col-sm-4').remove();
}
function 검색함수본체() {
    $.ajax({
        type: "get",
        url: "store.json",
        dataType: "json",
        success: function (data) {
            var 데이터 = data.products;
            var 보존용데이터 = 데이터;
            $('.text').on("change keyup paste", function () {
                var searchVal = $(this).val();
                var flitVal = 데이터.filter(function (a) {
                    return a.title.indexOf(searchVal) != -1;
                })
                검색용템플릿삭제();
                검색용템플릿생성(flitVal);
            })
            데이터 = 보존용데이터;
        }
    })
}
검색함수본체();

처음 생성된 템플릿에는 잘 작동하는데 검색으로 만든 새 템플릿에는 적용이 되지 않습니다.
아마 윈도우 로딩 이후에 생성된 템플릿이라 buy클래스를 가진 버튼에 적용이 안 된 거 같은데
해결방안이 뭐가 있을까요 선생님?

[codingapple]

html 새로 생성해주고 나서도 .buy버튼에 이벤트리스너 부착하라고 코드짭시다

[김윤재]

템플릿을 생성한 부모요소에 이벤트리스너를 붙여서 해결했습니다. 답변 감사합니다!

[글쓴이]

글