ajaxStart，ajaxStop僅在Firefox中正確觸發，而不是chrome或

Question

下面的代碼在Firefox中可以很好地執行（即，具有class =“ ajax-loader”的div分別顯示和隱藏了start和stop事件），但是由於某些原因，在IE或Chrome中卻沒有。 （注意，使用jquery 2.2版）

$(document).ajaxStart(
    function () {
        $('.ajax-loader').css("visibility", "visible");
    }
).ajaxStop(
    function () {
        $('.ajax-loader').css("visibility", "hidden");
    }
);

有任何想法嗎？

更新確定，看來事件確實在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文檔定義

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

Answer 2

請嘗試以下解決方案。此解決方案適合我。

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

CSS類

.hide{
   display:none;
}

希望此解決方案對您有用。 讓我知道您是否需要進一步的幫助。