[jQuery] 새 엘리먼트 추가시 이벤트 핸들러 깨지는 현상.

ajax나 innerHTML을 통해서 새로운 엘리먼트가 추가되면 이전에 걸려있던 이벤트 핸들러가 깨짐.


아래와 같이 했을 경우,
모든 <a 엘리먼트를 클릭했을 때 'a click!' 이라는 alert창이 뜨는 걸 기대한다.
처음에는 잘 되지만 btn_test라는 버튼을 클릭하고 새 <a 를 추가하면 그때부터 모든 click 이벤트 핸들러가 동작을 하지 않는다.

$(document).ready(function() {
    $('a').click(function() {alert('a click!')});

    $('#btn_test').click(function(){
        $('#cont').html($('#cont').html()+'<br/><a href="#">bbbb</a>');
    });   
});

이것은 아래와 같은 방법으로 해결할 수 있다.

1. Re-binding
2. Use the Live Query Plugin

참고: http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F




플러그인은 뭐 좀 귀찮아서 싫고, Re-binding 방식은 말 그대로 한 번 더 이벤트 핸들러를 걸어주는 방식이다.
위의 예제를 변형하자면 아래처럼 바꾸면 제대로 동작한다.

$(document).ready(function() {
    // 이벤트 핸들러 함수를 따로 빼놓음
    function a_click() {alert('a click!');}
  
    // onload 시 따로 빼놓은 함수를 걸어둠
    $('a').click(a_click);

    // 새 <a 엘리먼트 추가
    $('#btn_test').click(function() {
        $('#cont').html($('#cont').html()+'<br/><a href="#">bbbb</a>');
        // 한 번 더 이벤트 핸들러를 걸어 줌
        $('a').click(a_click);
    });
});