모달창 닫기 버튼 오류 - innerHTML 사용 시 이벤트리스너 오류

문제 상황

❓close.addEvent 오류

모달창의 내용을 채워넣기 전에 잘 작동되었던 close 이벤트리스너가

내용을 채워넣으니 작동되지 않는다.

 

 

문제 추론

찾아본 결과 내용을 추가하면서 사용한 .innerHTML이 원인이었다.

innerHTML 사용 시 자손의 이벤트 리스너 파괴

 

 

시도 1. append로 변경하기

 modalSection.append(temp_modal);

제목, 내용이 제대로 포함었지만 백틱으로 작성한 html요소가 그대로 나타난다.

하지만 모달 닫기창은 잘 작동한다.

 

시도 2. insertAdjacentHTML 사용하기

  modalSection.insertAdjacentHTML("afterbegin", temp_modal);

원하는 모습대로 출력도 되고, 닫기창도 잘 작동되지만

이전에 눌렀던 카드내용이 카드 아래에 계속해서 붙는 현상이 발생한다.

이런 식으로..

 

 

해결 방법

 

📍모달창 비워주기

직전 상황에서 insertAdjacentHTML을 사용하면 이전 내용이 계속 붙었다.

새로운 모달창을 눌러주기 전에 한 번 비워주기 위해 빈 문자열("")을 입력한다.

modalSection.innerHTML = "";

modalSection.insertAdjacentHTML("afterbegin", temp_modal);

 

 

📍close 이벤트리스너 가져오기

이제 모달창에 클릭한 내용으로만 채워줬다.

하지만 빈 문자열을 innerHTML을 넣었더니 또 다시 close 이벤트리스너가 작동되지 않는다.

 

이벤트리스너 앞의 'close'를 로직 맨 상단에 선언해두었다.

 

모달창이 생성되기 이전에 close를 선언해두어서 작동이 되지 않았다.

변수 선언문과 close 이벤트 리스너 모두 모달창 생성 함수 내로 가져온다.

 

 

📌최종 모달창 생성 함수

function displayModal(info) {
  temp_modal = `<div data-id="${info.id}" class="modalCard">
         <img id="poster" src="${
           baseImgUrl + info.poster_path
         } class="card-img-top alt="poster">
         <h1>${info.title}</h1>
         <p>${info.overview}</p>
         <h3>평점: ${info.vote_average}<span id="mvaver"></span></h3>
         <span class="close">&times;</span>
         <button class="book">북마크 추가</button>
    </div>`;

  modalSection.innerHTML = "";
  modalSection.insertAdjacentHTML("afterbegin", temp_modal);

  const close = document.querySelector(".close");

  close.addEventListener("click", function (e) {
    console.log(e.target);
    modal.style.display = "none";
    document.body.style.overflow = "scroll";
  });
}