检查jquery（或ajax）函数是否完成

Question

I am currently running this code:

$("document").ready(function() {
    $(".tableCourses td:first").trigger('click');
    setTimeout(function() {
        $(".tableTutors tr:eq(1) td:eq(0)").trigger('click');
        setTimeout(function() {
            $(".tableForms tr:eq(1) td:eq(0)").trigger('click');
            setTimeout(function() {
                $(".tableDivision tr:eq(2) td:eq(3)").trigger('click');
            }, 800);
        }, 700);
    }, 600);
});

What this basically does is activate my onclick events for every first cell of every table I have.

Don't judge.. It's what I need. The setTimeout is kind of ugly, and it only works half of the time.

The problem is that every table has to be loaded with ajax, which can take some time. When I use this code:

$("document").ready(function() {
    $.when($(".tableCourses td:first").trigger('click')).then(function() {
        $.when($(".tableTutors tr:eq(1) td:eq(0)").trigger('click')).then(function() {
            $.when($(".tableForms tr:eq(1) td:eq(0)").trigger('click')).then(function() {
                $(".tableDivision tr:eq(2) td:eq(3)").trigger('click');
            });
        });
    });
});

the page only executes the first click handler, which is loading the next table. Am I using $.when and $.then wrong? Is my syntax wrong?

I normally never touch jquery or ajax, so I'm kind of in the dark.

Another note: the first click has to load two tables from two seperate php pages, so that one takes longer.

EDIT: I just realised that the $.when and $.then just work for the click activation, not the entire ajax loads. Any way to detect when those are done?

EDIT 2: This is the onclick event, it is almost the same for every click:

<script>
    function courseToTutor(id) {
        var clickedCourse = document.getElementById("course" + id).value;
        $.post('loadTutors', {postname: clickedCourse}, function() {
            $('#loadTutors').load('loadTutors.php');
            $('#loadForms').load('loadForms.php');
        });
        ;
        window.scrollTo(0, 0);
    }
</script>

It is complicated.. lol. I need to somehow check when these functions are done, before I start my next onclick event on page load?

Answer 1

jQuery ajax has callbacks for done, error and always.

Check out the docs

These functions are activated when call is ended successfully, with error, or eitherway (respectively).