jQuery ajaxStart / ajaxStop无法正常工作

Question

我有非常简单的代码，我通过jquery进行了部分回发，并且我使用ajaxStart / ajaxStop来完成一些工作。 但它不起作用。 我只是不明白为什么它不起作用。 这是我的代码

$("#imgHolder").ajaxStart(function () {
 $('div#content').block({
          message: '<table><tr><td><img  src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
        css: { border: '1px solid #a00' }
        });
    $('#imgHolder').empty();
    $("#btnPrint").hide();
    });

  $("#imgHolder").ajaxStop(function () {
  $("#btnPrint").show();
  $('div#content').unblock();
 });  



$(document).ready(function () {
 $.ajax({
  type: "POST",
  url: "UPSLabelFormUK.aspx/ProcessInfo",
  data: JSON.stringify(DTO),
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (data) {
  if (data.d[0].Message == "SUCCESS") {
  //alert(data.d[0].TrackNumber);
  ///alert(data.d[0].LabelImagePath);
  var _images = [data.d[0].LabelImagePath];
  $.each(_images, function (e) {
    $(new Image()).load(function () {
    $('#imgHolder').html("<img src='" + data.d[0].LabelImagePath + "' width='310' height='402' border=0/>");
  }).attr('src', this);
 });
}
 } ,
  error: function (XMLHttpRequest, textStatus, errorThrown) {
  alert(textStatus);
  }
 });
 });

我只是不明白为什么我上面的ajaxstart / ajaxstop无法正常工作。 请帮助我了解为什么我的代码有误。

但是当我更改代码时，我的ajaxstart / ajaxstop开始工作了

        $(document).ajaxStart(function () {
            $('div#content').block({
                message: '<table><tr><td><img  src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
                css: { border: '1px solid #a00' }
            });

            $('#imgHolder').empty();
            $("#btnPrint").hide();
        });


        $(document).ajaxStop(function () {
            $("#btnPrint").show();
            $('div#content').unblock();
        });

唯一的变化是$(document).ajaxStop(function () {

$("#imgHolder").ajaxStart(function () {

所以请解释为什么我上面的ajaxStart / ajaxStop代码不起作用。 谢谢

Answer 1

从jQuery 1.8开始，.ajaxStop（）方法仅应附加到文档。

来自“ ajaxStop”的jquery api网页。 您可以在这里检查。

Answer 2

鉴于只有在没有其他ajax请求进行时才调用ajaxStart的事实，如果要将其用作AJAX加载程序指示符，它就没有用。

您是否尝试过（告诉我它是否起作用）

jQuery(document).ajaxStart(function(){
alert("it begins");
})

Answer 3

尝试这个：

$("#loading").bind({
   ajaxStart: function() { $(this).show(); },
   ajaxStop: function() { $(this).hide(); }
}); 

本质上，将您的loadingAnimationElement绑定到全局触发的ajaxStart和ajaxStop事件。 仅在您打算时显示。

当jQuery不执行任何Ajax请求并启动新请求时，它将触发ajaxStart事件。 如果其他请求在第一个请求结束之前开始，则这些新请求不会导致新的ajaxStart事件。 当最后一个未决的Ajax请求完成并且jQuery不再执行任何网络活动时，将触发ajaxStop事件。

Answer 4

试试这个示例代码：

 var $loading = $('#div_Loader').hide();
    $(document).ajaxStart(function () {  
         $loading.show();
    })
    .ajaxStop(function () {
        setTimeout(function () {                 
            $loading.hide();
        }, 1000);                                  
    });

Answer 5

这种组合效果很好。 感谢用户@brroshan

母版页的JS

<script language="JavaScript" type="text/javascript">

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

$(function () {

// Some other code

// The end of this code block

$("#loading").hide();

$("#loading").bind({
         ajaxStart: function () { $(this).show(); },
         ajaxStop: function () { $(this).hide(); }
     });

});

</script>

母版页的html

<div id="loading" class="display: none;">
    <h2>Loading...</h2>
</div>