ajaxStart，ajaxStop只在firefox中正確觸發，不是鉻或者

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中，.ajaxStart事件在ajax調用回來之前似乎不會被觸發。

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

試用試用下面solution.This的解決方案是爲我工作。

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

CSS類

.hide{ 
    display:none; 
} 

希望這個解決方案是爲你工作。讓我知道你是否需要進一步的幫助。