Question

下面的代码在Firefox中执行正常（即div为class =＆＃34; ajax-loader＆＃34;分别显示和隐藏起始和停止事件），但由于某种原因，不在IE或Chrome。（注意，使用jquery版本2.2）

 + gnuplot -e 'filename=\'\''data.dat\'\''' plot.gnuplot

filename=\'data.dat\'
         ^
line 0: invalid character \

任何想法？

更新好的，似乎事件在IE和Chrome中发生了。我暂时禁用了.ajaxStop段中的代码。不同之处在于Firefox会立即显示加载元素，而在Chrome和IE中，在ajax调用返回之前，.ajaxStart事件似乎没有被触发。

Answer 1

我建议您需要尝试这样做。

$(document).ready(function() {
  $("#click").on('click', function() {
    $('.ajax-loader').css("visibility", "visible");
    $.ajax({
      url: 'yourURL',
      success:function(){
        $('.ajax-loader').css("visibility", "hidden");
      }
    });
  });

});

.ajax-loader{
visibility:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>Click</button>
<div class="ajax-loader">Loading</div>

尝试根据ajaxstart doc

定义此内容

$.ajaxSetup({'global':true});

Answer 2

尝试下面的解决方案。这个解决方案对我有用。

$(document).on({
            ajaxStart: function () {
                $('.ajax-loader').removeClass("hide");
            },
            ajaxStop: function () {
                 $('.ajax-loader').addClass("hide");
            }
        });

CSS类

.hide{
   display:none;
}

希望此解决方案适合您。如果您需要进一步的帮助，请告诉我。

ajaxStart，ajaxStop只在firefox中正确触发，而不是chrome或ie

2 个答案: