This code

$("#loading").ajaxStart(function() {
        alert("start");
        $(this).show();
    });

in my mark-up

<div style="text-align:center;"><img id="loading" src="../images/common/loading.gif" alt="" /></div>

Here is the full ajax request:

$.ajax({
        type: "POST",       

        url: "http://localhost/WebServices/Service.asmx/GetResults",

        data: jsonText,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {

            var results = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
            PopulateTree(results);
        },

        error: function(xhr, status, error) {
            var msg = JSON.parse(xhr.responseText);
            alert(msg.Message);


        }
    });

$("#loading").ajaxStart(function() {
        alert("start");
        $(this).show();
    });

    $("#loading").ajaxStop(function() {
        alert("stop");
        $(this).hide();
        $("#st-tree-container").show();

    });

never fires alert "start" even though the gif is shown to rotate. AjaxStop gets triggered as expected. Any ideas why?