장바구니 localStrorage 숙제 2

[정재희]

하루종일 이것저것해봐도 더보기버튼 누른 후 첫번째 상품 담기버튼을 누르면 계속 중복이 뜨는데 
어디서부터 뭐가 잘못됐는지 buy() 에다
let buyClick = false;
if(buyClick == false){
buy();
buyClick = true
}로 하고 중복으로 buy() 가 안되게해봐도 
buy()를 함수안에도 둬보고 두고 옮기고 제거하고 아무리 해봐도 
다른분꺼 보면서 수정해봐도 
buy()를 다른 변수안에 둬보고 다른변수.buy() 이렇게 불러봐도 계속 첫번째 상품은 count가 2 씩 또는 3개씩 증가해버립니다.
지금 저의 상태는

function templates(name) {
  name.forEach((a, i) => {
    var 템플릿 = `<div class="col-sm-4">
        < img src="https://via.placeholder.com/600" class="w-100">
        <h5>${name[i].title}</h5>
        <p>가격 : ${name[i].price}</p>
        <button class="btn buy"></button>
      </div>
      `;
    $(".row").append(템플릿);
  });
}
templates(products);
buy();
var click = 0;
$(".more").click(function () {
  click++;
  if (click == 1) {
    $.get(
      "https://raw.githubusercontent.com/jeongjaehee/simpleJson1/main/simple1.json"
    ).done((a) => {
      var data = JSON.parse(a);
      templates(data);
      buy();
    });
  }
  if (click == 2) {
    $.get(
      "https://raw.githubusercontent.com/jeongjaehee/simpleJson2/main/simple2.json"
    ).done((a) => {
      var data = JSON.parse(a);
      templates(data);
      buy();
      $(".more").remove();
    });
  }
});
var cart = [];
var baguni = 0;
function buy() {
  $(".buy").click(function (e) {
    var title1 = $(e.target).siblings("h5").text();
    let proIndex = cart.findIndex((a) => {
      return title1 == a.title;
    });
    if (proIndex == -1) {
      cart.push({ title: title1, count: 1 });
    } else {
      cart[proIndex].count++;
    }
    baguni++;
    console.log(baguni, "baguni");
    localStorage.setItem("cart", JSON.stringify(cart));

    console.log(cart);
    $(".baguni > span").text(baguni);
  });
}

입니다 도움을 주신다면 정말 감사.... 알려주시면 감사하겠습니다....

[codingapple]

buy() 실행할때마다 이벤트리스너가 부착되는듯요 
이벤트리스너는 한번만 부착합시다 추가되는 상품에만 이벤트리스너 붙이거나 기존이벤트리스너 지우거나 하면 될듯요

[정재희]

둘 중 하나 제거해주면 처음에 실행될때 담기가 안되거나 더보기 클릭할때 담기가 실행이 안되거나 안됩니다.. ㅎ 
다른방법을 찾아보고 있는데....아직 잘 모르겠습니다

[codingapple]

처음에 실행하는 buy()는 냅두고
html 새로추가할때 새로추가한 html에만 이벤트리스너 붙입시다

[정재희]

var more = document.getElementById("more");

// 이벤트 리스너를 추가
more.addEventListener("click", function () {
  buy();
});

처음에 function buy(){} 하고 buy()실행하게 했구요... 그다음
이벤트리스너 추가해서 만들었는데 더보기 클릭하고나서는 담기버튼이 아예실행이 안됩니다.... 
말씀하신 의도가 이게 맞을까용...?

[codingapple]

더보기누르면 <button class="btn buy"></button> 이런 html 추가하고 있는데 이거누르면 상품추가해주는 기능 구현합시다 
buy()는 페이지의 모든 .buy 버튼에 이벤트리스너 붙이는 코드라 그건 또 쓰면 안될듯요

[글쓴이]

글