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 页面加载的一部分加载的 id 来识别 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;
});