AjaxStart 和 AjaxStop 不工作

Question

我使用 ajaxStart 和 ajaxStop 来显示加载 gif。 在我添加这段代码之前它工作正常：

$(function(){  
$('.link a').live('click', function(ev) {

    ev.preventDefault();
    ev.stopPropagation();


    $('#main').load($(this).attr('href'));


  return false;
});
});

这是我的 ajaxStart/Stop 代码：

$(document).ajaxStart(function(){
    $("#loading").show();
 }).ajaxStop(function(){
    $("#loading").hide();
 });

请帮忙:)

编辑：我添加的导致问题的代码被添加以启用 div 内的页面链接，以便在单击时加载 div 本身中的链接，而不是加载整个窗口.新加载页面时，AjaxStart 和 AjaxStop 工作正常，但是一旦我单击 div 中的链接（加载页面），AjaxStart 就不会触发。

链接的代码（在页面内的 div 中）：

 echo "<span class = 'link'><a href='feed.php?".$new_query_string ."' id='page_a_link'     name='page_a_link' >$i</a></span>";

 echo "<span class = 'link'><a id='page_a_link' name='page_a_link' href='feed.php?".$new_query_string ."' >< Pre</a></span>";

 echo "<span class = 'link'><a href='feed.php?".$new_query_string ."' id='page_a_link' name='page_a_link' >Next</a></span>";

这些用于分页。我只是从 PHP 代码中取出了链接部分。

Answer 1

我认为问题在于，当您重新加载页面时，内容以及分页链接会被替换，并且您会丢失旧的绑定点击事件

试试这个代码：

$(function(){  


  function bindPagination() {
    $('span.link a').on('click', function(ev) {
       ev.preventDefault();
       // ev.stopPropagation();

       $('#main').load($(this).attr('href'), function(){
          //callback function fired when page loaded
          //now rebind click event
          bindPagination(); 
       });

       return false;
    });   
  }

}); 

并尝试以这种方式更改“加载器”：

$('#loader')
  .bind("ajaxSend", function() {
    $(this).show(); 
        })
  .bind("ajaxComplete", function() {
    $(this).hide();
});