구매 버튼으로 장바구니에 추가하기 관련 질문입니다

[윤인수]

안녕하세요!
JavaScript 입문과 웹 UI개발 - 장바구니 기능과 localStorage 과제 진행 중 궁금한 부분이 생겨 질문 드립니다.

과제 내용은 상품 아래의 구매버튼을 누를 시 local storage에 상품명을 저장하는 건데
더보기를 눌러 추가한 항목은 $('.buy).on('click',addToCart) 를 적용받지 못해서 구매버튼을 눌러도 아무런 반응이 없었습니다.

아무래도 최초 로드 이후에 추가한 요소는 저 방식으로 이벤트리스너가 안붙는 것 같아서 이런 저런 방법을 시도하다가 찾은 해결책은
새로운 요소를 받아오고 추가할 때 마다 해당 forEach문 안에 $('.buy').last().on('click', addToCart); 를 넣어 이벤트리스너를 달아주는 것이었습니다.

그런데 아무리 봐도 저런 이벤트 리스너가 필요할 때 마다 동적으로 요소를 추가하는 곳을 다 찾아서 비슷한 짓을 해야 된다고 생각하니 확장성이 너무 떨어져 보입니다.
이리저리 검색해봐도 좋은 방법을 찾지 못했는데, 혹시 어떤 방식으로 이벤트리스너를 적용하는 것이 가장 좋은 방식일까요?

[codingapple]

상품새로추가할 때마다 $('.buy).eq(몇번째).on('click',addToCart) 해주면 될듯요

[서상혁]

https://amy-it.tistory.com/97
https://wazacs.tistory.com/50

저는 이 2개의 레퍼런스를 참조해서 

버튼의 비동기성 때문에 부모 요소인 이미 존재하는 row element 영역 전체에 대해 이벤트를 발생시켰는데
row 안에 있는 버튼 이외에도 다른 요소들 선택 시에 local Storage에 저장이 되는 문제점이 있었습니다.

이를 해결하기 위해,
버튼을 눌렀을 때만 local Storage에 저장이 되어야 하므로 
e.target이 구매 버튼을 눌렀을때만 코드가 실행이 되게 하기 위해 
classsList.contains를 이용해 buy 클래스명이 있을때만 동작하게 하여 구매버튼만 눌렀을때만 localstorage 저장할 수 있게 만들었습니다.

 
인수님도 어떻게 하셨는지 궁금합니다!
@codingapple 이러한 코딩 방법도 유효한 것인지 궁금합니다! 혹시 더 괜찮은 방법이 있으면 힌트를 제공해주세요

[codingapple]

그렇게 이벤트버블링 이용하는것도 좋은 방법입니다

[윤인수]

상혁님 방식대로 하면 구매버튼 뿐 아니라 상품 사진이나 상품명 같은걸 클릭했을 때도 해당 함수안에 if문이나 switch문 같은걸 써서 확장하기 좋아보이네요 !
감사합니다 !

제가 적용한 방식은 아래와 같습니다

저는 일단 이렇게 더보기 버튼을 눌렀을 때 데이터를 받아오는 getMore 함수를 실행하고
받아온 데이터를 getMore 내부에서 moreProduct 함수에 넣어 호출하는 방식으로 html 요소를 append 해줬습니다.
이때 반복문이 돌 때마다(한 가지 목록을 추가할 때 마다) buy 클래스가 붙어있는 마지막 버튼에 클릭에 대한 이벤트 리스너를 달아줬습니다.
get요청을 보내기 전, 기존 script에 존재하는 상품을 추가할 때도 moreProduct()를 통해 추가해줘서 정상적으로 이벤트 리스너가 동작했습니다.


구매 버튼을 눌렀을 때 실행되는 함수는 따로 분리해서 작성했습니다 !

[글쓴이]

글