새롭게 로드된 요소도 클릭 이벤트 처리하기: jQuery 이벤트 위임
새롭게 로드된 element 가 click event 를 받지 않는다 ?
우리 플랫폼은 댓글이 5개씩 페이지 로드가 끝나면 챡챡 로드가 된다. 그래서 5개 보다 댓글이 많다면 6개째 댓글 부터는 페이지 로딩이 끝난후 로드가 된다.
댓글에는 번역 버튼을 옆에 두어 해당 댓글을 번역해서 볼 수 있는데 이게 6번째 댓글부터는 번역 버튼이 말을 듣지 않았다! 해당 코드는 아래와 같았다.
1
2
3
$(".class").on("click", function() {
// 번역하기
});
아무리 봐도 잘 한거 같은데.. 라는 생각이었지만 해결법은 간단했다 바로 아래처럼 click event 받는 법을 바꾸는 것이다.
1
2
3
$(document).on("click", ".class", function() {
})
이 둘은 차이가 있었다!
첫번째 방식은 기존 DOM 에 있는 class 요소에만 이벤트가 바인딩 되어 새롭게 로드 된 class요소는 event 를 받아 오지 않았다. 두번째 방식은 document 에 이벤트를 위임한다. 사실 document 가 아니고 class 를 가지는 parent요소 여도 된다. 그러니까 상위에 이벤트를 위임하여 동적으로 추가된 class 요소도 click event 를 가져올수가 있게된다
또 장점이 있을까 ??
우선 당연히 동적으로 이벤트를 핸들링 할 수 있다. 예시는 클릭으로 들었지만 여러가지 이벤트들이 다 마찬가지다 그리고 메모리 절감이 된다. $(".class") 로 이벤트를 바인딩 할 경우는 모든 class 개수 만큼의 이벤트 핸들러가 등록되지만 document 로 하면 1개만 등록이 된다! 물론 속도에서 차이가 날 수 있으니 잘 골라서 사용하면 되겠다!
This post is licensed under CC BY 4.0 by the author.