JavaScript和范围问题

I have an issue with calling ajax request with jquery. The order that I'm doing this in is:

1. click the button
2. do ajax post
3. when the ajax request is finished I call a function that is out side the scope.

For some reason and supecting that it has to do with the fact that i am in the on click callback that the load function is out of scope. But I don't even see the console.log message either. But I do see the ajax call.

Any ideas? Maybe I'm doing this the wrong way???

Here's the prototype code that resembles what I'm trying to do:

$(document).ready(function(){

        $('#button').on('click',function(evt){
            var data = {};

            ajax('index.html', data).done(function(){
                console.log('Fire Please'); // this does not fire after the ajax call!!!
                    load(); // this does not fire after the ajax call!!!

            });
        });

        function load(){
            // do another ajax call and add to the dom
        }

        function ajax(url, data){
            return $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: data
            });
        }
});

And Here's the Actual Code I'm trying to use

$(document).ready(function(){

    // add onclick event to the Add Unit Button
addUnitButt.on('click', function(evt){
    var data = {
        id: id,
        dept_no: dept_no.val(),
        dept: dept.val()
    };

    evt.preventDefault();

    dept.val('');
    dept_no.val('');
    $(this).prop('disabled', true);


    ajax('index.html', data).done(function(){
        load();
    });

});

function load(){
    var data = {
        id: 575
    };

    // show loading
    showLoading();

    // reset the table dom
    $("#listTable").find("tr:gt(0)").remove();

    // do initial load of the list data
    ajax('index.html', data)
    .done(function(units){
        var data = toJSONObject(units);

        for(var x = 0; x < data.length; x++){
            if((x & 1) == 0){
                addRow(data[x], data.length, 'odd');
            }else{
                addRow(data[x], data.length, 'even');
            }
        }

        // hide loading
        hideLoading();
    });
}

// ajax function to call for data
function ajax(url, data){
    return $.ajax({
        type: 'POST',
        data: data,
        dataType: 'json',
        url: url
    });
}

});

Thanks in advance!

.always() must be called.

Make sure your server response have the right headers like Content-Type. And the response body is valid JSON.

Maybe the code of your index.html is not valid JSON