# jQuery - 동적으로 생성된 요소에 click 이벤트가 안 먹힐 때 해결법

jQuery로 팝업 닫기 버튼에 .click()을 걸었는데, 아무 반응이 없다?
분명 $("#btnClose").click() 이렇게 했는데 왜 안 되지?

 

 

• 버튼에 click() 이벤트를 등록했지만 동작하지 않음
• 버튼은 Ajax 이후 동적으로 생성된 요소

$("#btnClose").click(function () {
    $(".popup").removeClass("on");
});

 

 

원인 분석

.click()은 문서 로딩 시점에 존재하는 요소에만 이벤트를 바인딩한다.

 

해결 방법 : 이벤트 위임 사용

$(document).on("click", "#btnClose", function () {...})처럼 이벤트를 위임하면 해결된다.

$(document).on("click", "#btnClose", function () {
    $(".popup").removeClass("on");
});

 

• document는 항상 존재함
• 클릭 이벤트를 "미리 위임"해둬서 나중에 생성된 버튼도 반응함

이벤트 위임이 필요한 다른 상황들

 

• Ajax로 템플릿을 불러오는 경우
• .append() 등으로 새 DOM 요소를 추가하는 경우
• v-if, ngIf, react-if 등 프론트 프레임워크로 요소가 조건부 렌더링 될 때

 

✔️ 팁: 더 좁은 범위로 위임하면 성능도 좋아짐

$(".popupWrap").on("click", ".closeBtn", function () {
    $(this).closest(".popupWrap").removeClass("on");
});

 

 

꼭 document 말고도, 부모 요소를 기준으로 위임해도 됨

 

결론

 

• .click()은 정적인 요소만 동작
• 동적 요소에는 .on()으로 이벤트 위임
• 실무에서 자주 발생하는 실수니까 패턴으로 기억해두자