[jQuery tip] ajax call후에 binding 해놓은 함수 실행이 안될 때

    $('.btnLikeComment').click(function() {
        // 함수 내용        
    });	    

이렇게 바인딩을 설정해놓았는데, 해당 클래스가 있는 부분을 ajax call을 통해서 내용 변경 후에는 바인딩이 풀린다고 해야 하나.. 실행이 안되는 경우가 생겼습니다. 구글링을 하다 보니, 단순히 $('.btnLikeComment').click(function() { 이렇게 하면 해당 시점에 생성된 요소들에 대해서만 바인딩이 되는 거네요. 동적으로 생성되는 클래스에 대해서 바인딩 설정을 하려면 아래와 같이 $(document).on('click', '.btnLikeComment', function ... 이렇게 on()을 이용하면 document 자체에 바인딩이 되어 버리기 때문에 이후에 동적으로 추가되더라도 처음에 바인딩한 것과 같은 효과가 된다고 합니다. 

    $(document).on('click', '.btnLikeComment', function(event) {
        // 함수 내용        
    });	    

.on()을 사용하는게 점점 유행이 되는건가 하고 생각없이 많이 이용하던 것이었는데, 그렇게 단순한 문제는 아니었네요.