javascript - .ajaxStart() 和 .ajaxStop() 在第一次后没有触发

Question

这就是我所拥有的：

$(document).ready(function(){
    //stuff
}).ajaxSend(function() {
    $('.overlay').show();
}).ajaxStop(function() {
    $('.overlay').fadeOut();
});

我遇到的问题是，我第一次触发 ajax 动作时它工作得很好，但在那之后的任何时候都没有。我必须重新加载页面才能让 ajaxSend/Stop 再次工作。所以说我加载一个页面，点击'加载更多'来ajax加载内容，覆盖显示没有问题。但是然后我再次单击它，一切正常，除了模态这次或之后的任何时间都没有出现。

有任何想法吗？

Answer 1

$(document).ready只会被调用一次 - 当加载 DOM 时。这在通过 ajax 加载数据时不起作用。

两种选择：

首先，如果您可以使用作为 ajax 页面加载的一部分加载的 div 来识别 div，那么您可以执行（编辑）：

$('.overlay').ajaxSend(function() { 
                                       $(this).show(); });
$('.overlay').ajaxStop(function() { 
                                       $(this).fadeOut(); });

或者，您可以完全放弃，ajaxStart并ajaxStop在单击“加载更多”链接时触发它们，例如：

$("a").click(function(){
   var url = $(this).attr('href');
   $(".overlay").show("fast", function(){
       $("#targetdiv").load(url + " #div_id", {}, function(){
          $(".overlay").fadeOut();
       })
   })
   return false;
});