Uncaught ReferenceError: ~~~~ is not defined

 

ajax 사용해서 첨부파일을 삭제하는 작업을 하고있는데 오류가 떳다.

 

 

지금 내가 작업하는 기준으로 targetFile 변수가 정의되지 않았다는 것을 알려주고 있는데

 

이런 오류가 왜 나타나냐면

1. 변수를 참조하는 코드가 해당 변수를 정의한 코드 범위 내에서 실행이 안되거나

2. 변수가 정의되지 않은 상태에서 참조하고 있기 때문.

 

인데 내가 해당되는건 1번이엇다.

 

보통 이런 오류는 변수의 스코프 문제로 발생하는데 이를 해결하려면 변수가 정의된 범위 내에서 참조를 해야함.

 

이벤트 핸들러 함수 내에서 정의된 변수는 해당 함수 내에서만 유효해서 외부에서는 참조할 수 없기때문.

 

오류가 났던 코드는

$(".uploadResult").on("click", "button", function(e){
    console.log("삭제함.");

    var targetFile = $(this).data("file");
    var type = $(this).data("type");

    var targetLi = $(this).closest("li");
}); // 삭제 이벤트 끝
// 첨부파일 삭제 ajax
$.ajax({
    url: '/deleteFile',
    data: {fileName: targetFile, type: type},
    dataType: 'text',
    type: 'POST',
        success: function(result){
            alert(result);
            targetLi.remove()
        }
}); //$.ajax

 

이런식으로 이벤트 핸들러 함수 밖에 있기때문에 오류가 났던것.

 

이걸 수정하면.

 

$(".uploadResult").on("click", "button", function(e){
    console.log("삭제함.");

    var targetFile = $(this).data("file");
    var type = $(this).data("type");

    var targetLi = $(this).closest("li");

    // 첨부파일 삭제 ajax
    $.ajax({
        url: '/deleteFile',
        data: {fileName: targetFile, type: type},
        dataType: 'text',
        type: 'POST',
            success: function(result){
                alert(result);
                targetLi.remove()
            }
    }); //$.ajax
}); // 삭제 이벤트 끝

 

안쪽에 넣어주면 해결이 됨.

 

 

자바스크립트를 공부하면서 기본 개념을 한번 씩 더 잡아야 할 거 같다.