Jquery ajaxStart 没有被触发

Question

这段代码

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

在我的标记中

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

这是完整的 ajax 请求:

$.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();

    });

即使 gif 显示为旋转，也不会触发“开始”警报。 AjaxStop 按预期触发。有什么想法吗？

Answer 1

它不会被触发，因为您的处理程序 .ajaxStart()直到 ajax 请求已经开始之后(过去它应该被调用的时间)才注册。 .ajaxStop()也在请求完成之后、但之前注册，因此当它返回时，它就会挂接起来运行。

要解决此问题，请将其移至第一个 $.ajax() 之前调用:

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

更新:从 jQuery 1.9 开始，AJAX 事件应仅附加到文档。 http://jquery.com/upgrade-guide/1.9/#ajax-events-should-be-attached-to-document

$(document).ajaxStart(function() {
  $("#loading").show();
});

$(document).ajaxStop(function() {
  $("#loading").hide();
  $("#st-tree-container").show();
});