[jQuery] Ajax 호출 후 추가된 엘리먼트에 이벤트가 작동하지 않을 때

목차

 

 

문제 상황

예를 들어 댓글 기능의 경우, 클라이언트의 페이지가 새로고침되지 않고 기능이 동작하게 하려면 ajax 비동기로 처리해야 할 것입니다. 그런데 댓글이 추가되는 상황을 생각해 봅시다. 댓글이 새로 추가되면 해당 댓글에 댓글 삭제 버튼도 함께 추가되고, 삭제를 클릭했을 때 다시 삭제가 비동기로 처리되어야 합니다. 그런데 비동기로 추가된 요소(삭제 버튼)에 대한 이벤트 처리를 다음과 같이 작성하면 이벤트 처리가 작동하지 않는 것을 확인할 수 있습니다.

$(".commentDelBtn").on("click", function () { 		
		//댓글 삭제 코드
});

 

원인 

이는 버튼이 비동기로 새롭게 추가되었기 때문입니다. 이벤트 핸들러는 코드가 실행되는 시점에 페이지 내에 이미 존재하고 있는 엘리먼트에 대해서만 바인딩됩니다. 

 

해결 방법

이벤트가 바인딩되는 엘리먼트를, 비동기로 추가되는 엘리먼트가 아닌 이미 존재하고 있는 부모 엘리먼트로 지정하여 이벤트 위임이 발생하도록 합니다. 위임된 이벤트 핸들러(Delegated event handlers)는 나중에 문서에 추가될 하위 요소들에 대해서도 이벤트를 처리할 수 있다는 장점을 가집니다. 그리고 .on 함수의 두 번째 인자로 실제 이벤트가 발생할 엘리먼트를 지정합니다. 이는 다음과 같은 형태가 될 것입니다.

$(staticAncestors).on(eventName, dynamicChild, function() {});

 

이제 위의 코드를 수정해 보면 다음과 같습니다.

$("document").on("click", ".commentDelBtn", function () {
		//댓글 삭제 코드
});

$("body").on("click", ".commentDelBtn", function () {
		//댓글 삭제 코드
});

$("#comment_area").on("click", ".commentDelBtn", function () {
		//댓글 삭제 코드
});

 

세 가지 모두 잘 동작될 것입니다. 저는 댓글 목록을 자식으로 포함하고 있는 부모 엘리먼트의 id를 comment_area로 지정하여 이벤트를 처리하였습니다. 모든 문서나 바디에 대해 이벤트를 바인딩하기보다 영역을 특정하여 체크해야 할 범위를 줄이고 효율성을 높일 수 있습니다.

 

이상으로 Ajax 비동기로 추가된 엘리먼트에 대해 이벤트가 작동하지 않는 문제에 대해 알아보았습니다. 

 

 

참고

https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements

https://stackoverflow.com/questions/17715274/jquery-click-function-doesnt-work-after-ajax-call

https://api.jquery.com/on/