장바구니 기능과 localStorage 숙제 관련 질문입니다

[황재욱]

안녕하세요. 좋은 강의 너무 잘 듣고 있습니다.

자바스크립트 입문과 웹 UI 개발 > Level 3 > 장바구니 기능과 localStorage 숙제 관련 질문입니다.

해당 강의의 숙제 1을 위해 아래와 같은 코드를 구현했습니다.

크롬 개발자도구를 열어서 확인해보니, 처음 세 상품(Blossom Dress, Springfield Shirt, Black Monastery)은 로컬 스토리지에 정상적으로 추가됩니다.
하지만 "상품더보기"를 눌러서 새로 생성된 상품카드의 "구매하기" 버튼을 눌렀을때는 로컬 스토리지가 업데이트가 되지 않습니다.
선생님이 제시하신 코드를 대신 돌려봐도 처음 세 상품까지만 정상적으로 실행되고 "상품더보기"를 눌러서 나온 상품들은 "구매하기" 버튼을 눌렀을 때 여전히 로컬 스토리지에 저장되지 않습니다.

나름대로 디버깅을 시도해보니 새로 생성된 카드는 클릭시 이벤트리스너가 작동하지 않더라고요.
처음 세 상품과 같은 클래스(.buy)를 가지고 있는데 왜 작동하지 않는지 궁금합니다.
이벤트리스너 자체가 부착되지 않았다고 봐야 할까요?

바쁘신 와중에 감사합니다. 강의 통해서 정말 도움 많이 받고 있습니다.

[codingapple]

새로운 html 생성 후에도 이벤트리스너 달아달라고 코드짭시다

[황재욱]

감사합니다! 새로운 html 생성시 이벤트리스너를 부착해주니 잘 작동합니다.
위에 올린 코드대로면 이벤트리스너는 최초 실행시 존재하는 .buy에만 부착되는 것이군요.

새로 생성된 카드에 이벤트리스너 부착할때 마찬가지로 .buy 클래스에 달아달라고 코드를 짰는데, 기존에 존재하는 .buy에 이벤트리스너가 중복으로 달릴 것 같은데, 제가 이해한 게 맞나요?

그래서 혹시 몰라
(1) jQuery의 .off() 메소드를 써서 기존에 부착된 이벤트리스너를 제거한 후
(2) 모든 .buy에 이벤트리스너를 달아달라고 코드를 짰습니다.

이벤트리스너가 중복으로 달려있는지 어떻게 확인하나요? 그리고 같은 이벤트리스너가 중복으로 달려있는 경우 프로그램에 성능에 알아챌만한 차이가 생기나요?

[codingapple]

새로생긴것만 부착하거나 제거후 다시 부착하는게 안전합니다 
이벤트리스너 출력문법같은것도 있습니다 
성능차는 없을듯요 이상한 버그생기는것만 신경씁시다

[황재욱]

감사합니다! 이벤트리스너 출력문법은 유용할 것 같으니 구글링 해봐야겠군요.

[글쓴이]

글