[TIL] 23_1226 .on("click",~) 과 .click의 차이 = 동적으로 처리, 정적으로 처리

난제봉착

문제

jquery라이브러리를 사용하며

js에서 동적으로 html을 생성해서 만든 요소인 모달창을 $("#id").click이벤트로
닫기 기능을 처리하려고 했지만 닫기 동작이 되지 않았어.

 

 

시도

1. 혹시 class나 id가 잘못 됐는 지 다시 한 번 적어보고

2. id대신 class를 써서 사용해보고

3. 동작이 되는 다른 식을 가져와서 클릭이벤트가 일어나는 요소만 바꿔보기도 하고

4. 추가한 <div>요소가 혹시 걸림돌이 되지 않는 지 display : none을 시키거나 제거해서 확인해봤어.

 

 

-script

-문제의 그 동적요소

//js에서 동적으로 만든 요소들이야.
let data_html = `
          <h3>${name}</h3>
          <!-- <div class="modal-idValue">id : ${id}</div> -->
          <!-- <div class="closebtn" id="close-btn">&times;</div> -->
          <button name="close" type="button" class="closebtn" id="close-btn">&times;</button>

          <div class="modal-profile">
            <!-- 모달창 - 프로필사진 -->
            <div class="modal-pic">
              <img
                src="${photo}"
              />
            </div>
            <!-- 모달창 - 장점과 협업스타일 -->
            <div class="twopoint">
              <!-- 모달창 - 장점 -->
              <div class="good-point">
                <h4>장점</h4>
                <ul>
                  <li>${goodPoint1}</li>
                  <li>${goodPoint2}</li>
                </ul>
              </div>
              <!-- 모달창 - 협업스타일 -->
              <div class="style-point">
                <h4>협업스타일</h4>
                <ul>
                  <li>${workStyle}</li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 모달창 - TMI -->
          <div class="tmi-info">
            <h4>TMI</h4>
            <div class="tmi-content">
              <div class="modal-tmiphoto">
                <img
                  src="${tmiPhoto1}"
                  alt="tmi사진"
                />
              </div>
              <div class="tmi-comment">
                <ul>
                  <li>${tmiText1}</li>
                  <li>${tmiText2}</li>
                </ul>
              </div>
            </div>
          </div>
        `;
         if (id === cardId) {
            $("#modal-card").empty();
            $("#modal-card").append(data_html);
          } else {
            // return;
          }





//1.동작이 안 된 문제의 식
//동적으로 만든 html에 접근해서 html 요소를 선택해서 처리
$("#close-btn").click(async function () {
        document.getElementById("modal-cardwrap").style.display = "none";
        document.getElementById("modal-card").style.display = "none";
      });
      
      
//2.동작이 된 식
//DOM에 직접 접근해서 html 요소를 직접 선택해서 처리
$(document).on("click", "button[id='close-btn']", function () {
        document.getElementById("modal-cardwrap").style.display = "none";
        document.getElementById("modal-card").style.display = "none";
      });

 

 

해결과정 

 

선택 방법 : $(document).on() 으로 DOM에 직접 접근.

-$(document).on()은 DOM을 쭉 훑어보며 정적 요소와 동적 요소를 전부 처리할 수 있으니까 이걸 쓰기로 했어. 

- .click은 최초로 작성된 html에서 정적으로 생긴 요소만 처리가 가능해서.
(cf. js에서 append 등으로 나중에 생성된 추가적인 태그들로 짜여진 요소(태그)가 동적인 요소라고 할 수 있어)

-동적 요소를 처리하기 위해 동적처리와 정적처리가 둘 다 가능한 .on이벤트로 DOM에 직접 접근해서
html정적요소를 지나 나중에 생긴 동적 요소를 찾아서 처리할 거야.

( js가 싱글 스레드로 위에서 아래로 순서대로 읽어서 처리하는 것처럼 html도 위에서 아래 순서로 읽히니까)

 

$(document).on("click", "button[id='close-btn']", function () {
        document.getElementById("modal-cardwrap").style.display = "none";
        document.getElementById("modal-card").style.display = "none";
      });

 

 

알게 된 것

-.on은 직접 Dom에 접근해서 script까지 이어진 Document를 위에서 아래로 전부 훑어서 해당 요소를 찾아내서
최초에 생성된 html인 정적요소와 나중에 js로 유동적으로 만들어진 동적요소를 다 잡아서 움직일 수 있어.
-.click은 최초에 작성된 html로 만들어진 요소를 딱 뽑아 정해서 움직일 수 있어. 

 

느낀 점

-둘 다 같은 방식인 줄 알았는데 이렇게 새삼 알게 됐어.
-DOM의 싱글스레드 움직임을 다시금 생각하게 됐어.

 

 

*참고사이트
-  https://nancording.tistory.com/39

- https://januaryman.tistory.com/250

- https://www.google.com/search?q=jquery+.on+.click%EC%9D%98+%EC%B0%A8%EC%9D%B4&oq=jquery+.on+.click%EC%9D%98+%EC%B0%A8%EC%9D%B4&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQABiABDIHCAIQABiABDIHCAMQABiABDIHCAQQABiABDIHCAUQABiABDIHCAYQABiABDIHCAcQABiABDIHCAgQABiABDIHCAkQABiABNIBCDgxNTRqMGoxqAIAsAIA&sourceid=chrome&ie=UTF-8