banana like sunshine RSS FEED

그누보드로 된 사이트를 업데이트 하다 bootstrap을 적용하려고 해보고 있는데, 이상하게 안되어서 헤매다 알고 보니 그누보드5 배포판은 jQuery 버전 1.8.3을 기본으로 하고 있네요.

아시다시피 bootstrap3는 jQuery 버전이 좀 높아야 되지요.. 현재 stable version은 2.1.3이고, 최소 1.11 대 이상은 되어야 기타 jQuery의 플러그인까지도 이용가능할 것으로 보입니다.

혹시 그누보드에 jQuery 버전 높은 거를 이용해도 되나? 하고 단순히 생각했었는데, 이런. 1.8.3과 2 사이에는 넘사벽이 있네요. major update가 한두번 있다 보니 그누보드의 javascript 부분을 상당히 많이 뜯어고치기 전에는 1.8.3을 그냥 이용하는 수밖에 없는 거로 결론을 냈습니다;;

괜히 2.1.3 로드해봤다, 1.11 로드해봤다.. 이 기능은 되는데 저 기능은 안되고 삽질만 몇 시간 동안 했네요.

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

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

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

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