[jQuery] 동적 요소에 이벤트 바인딩이 안 될 때 해결법 (+ event delegation)

오늘 댓글 삭제 기능 구현하다가 생긴 TroubleShooting 정리...🥲

 

# 문제상황

댓글 삭제 버튼에 이벤트를 아래처럼 걸었는데 아무리 눌러도 반응이 없었다.

$("#btnDelete").on("click", function(e){
    var commentIdx = $(this).closest("tr").find("input[name='commentIdx']").val();
    if(!commentIdx){
        alert("댓글을 찾을 수 없습니다.");
        return;
    }
    location.href = "/comment/delete/" + commentIdx;
});

 

 

# 원인

알고보니 동적으로 생성된 요소에는 이벤트가 바인딩이 안 되는 문제였다.

페이지 로드 시점에 이미 있는 요소들에만 이벤트가 걸리고, 나중에 동적으로 추가된 요소들에는 이벤트가 적용이 안 됨.

 

 

# 해결방법

 - 이벤트 위임(Event Delegation) 사용

부모 요소에 이벤트를 걸고, 실제 클릭된 요소를 찾아가는 방식으로 해결

$(document).on("click", "#btnDelete", function(e){
    var commentIdx = $(this).closest("tr").find("input[name='commentIdx']").val();
    if(!commentIdx){
        alert("댓글을 찾을 수 없습니다.");
        return;
    }
    location.href = "/comment/delete/" + commentIdx;
});

 

 

 

# 작동원리

1. document에 이벤트 리스너 등록
2. 클릭 이벤트 발생하면 이벤트 버블링으로 document까지 전파
3. 선택자와 일치하는지 확인 (#btnDelete)
4. 일치하면 핸들러 실행

 

 

# 주의사항

• 동적 요소는 무조건 이벤트 위임 방식으로 구현하기
• document 말고 가까운 부모 요소에 걸어주는게 성능상 좋음
• this는 실제 클릭된 요소를 가리킴

이거 하는데 1시간 걸렸다... 다음엔 까먹지 말자 😭