웹개발 기능대회 과제

웹개발 기능대회 과제 중 해결이 안되는 부분이 있습니다!
담기 버튼을 눌렀을 때 버튼에 숨겨진 dataset 이 불러와 지지 않습니다.

정확히는 버튼을 클릭해도 console.log 가 작동? 하지 않습니다.
궁금한 부분은 굵은 글씨 부분입니다.

    
-------------------------------------------------------------------------------------------------------------------
    <div class="main-content">
      <div>
        <input type="text" placeholder="검색어입력" id="검색" />
      </div>
      <div class="item-container"></div>
    </div>

    <script>
      /*JSON 파일에서 상품정보 불러오기*/
      $.get("store.json").done(function (data) {
        data.products.forEach(function (a, i) {
          var 템플릿 = `
          <div class="item-list" draggable="true">
          < img src="${a.photo}" style="width: 60%" draggable="false"/>
          <div class="물건설명">
          <h4 class="상품명">${a.title}</h4>
          <p class="브랜드명">${a.brand}</p>
          <p>가격 : ${a.price}</p>
          <button class="담기" data-id="${a.id}">담기</button>
          </div>
          </div>`;
          $(".item-container").append(템플릿);
        });
      });
    </script>

    <script>
      /*검색어를 포함하는 상품만 정렬*/
      $("#검색").on("input", function () {
        $(".item-list").css("display", "none");
        $.get("store.json").done(function (data) {
          data.products.forEach(function (a, i) {
            if ($("#검색").val() == "") {
              $(".item-list").css("display", "block");
            } else if (
              a.title.includes($("#검색").val()) ||
              a.brand.includes($("#검색").val())
            ) {
              $(".item-list").eq(i).css("display", "block");
            }
          });
        });
      });
    </script>

    <script>
      /*담기 버튼 누르면 장바구니에 추가*/
      $(".담기").on("click", function (e) {
        console.log(e.target.dataset.id);
      });
    </script>

• 이 게시글은 이재원에 의해 3 월, 1 주 전에 수정됐습니다.