AJAX 이용시 상위 엘리먼트 접근 방법

Jqeury Ajax 통신시 상위의 엘리먼트 접근을 해야 하는 경우가 있다.

 

$("#btn_save").on("click",function(){
	$(this).attr("disabled",true);
    $.ajax({
        url: '/admin/send/api/v1/proc.do',
        type: 'post',
        cache: false,
        data: formData,
        dataType: 'json',
        success: function (data) {
            alert(data.rtn_msg);
            },
        error: function (request, status, error) {                    	
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);	});
        }
    });
});

 

버튼을 다시 활성화 하려는 경우 Ajax 영역에서 this를 선언하게 되면 Ajax 안에서만의 this 의 값을 가지게 된다.

그래서 상위의 엘리먼트인 btn_sava를 접근하기 위해선 다음과 같이 선언하면 된다.

 

 

var target_element = $(this);

$("#btn_save").on("click",function(){
	var target_element = $(this);
	$(target_element).attr("disabled",true);
    
    $.ajax({
        url: '/admin/send/api/v1/proc.do',
        type: 'post',
        cache: false,
        data: formData,
        dataType: 'json',
        success: function (data) {
            alert(data.rtn_msg);
            $(target_element).attr("disabled",false);
        },
        error: function (request, status, error) {                    	
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);	});
        }
    });
});

target_element의 변수를 통해서 부모 엘리먼트를 접근할수 있게 된다.