banana like sunshine RSS FEED

데이터를 post 방식으로 php server로 보낼 때, 각 요소들을 파싱해서 application/x-www-form-urlencoded 방식으로 보낼 수도 있고, 아니면 application/json 방식으로 보낼 수 있습니다.

angularJS에서는 아래와 같이 보냅니다 :

        $http({
            method: "post",
            url: apiUrl,
            data: JSON.stringify(data),
            headers: {'Content-Type': 'application/json'}
        }).success( function(rtnData){
           //
        });

그리고 서버의 php script에서는 간단하게 다음과 같이 받습니다:

$foo = file_get_contents("php://input");

var_dump(json_decode($foo, true));

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

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

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

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