jquery - Jquery loader 仅适用于第一个请求

Question

我实际上是在尝试为我的应用程序提供“符合人体工程学的感觉”，所以我有 3 个链接可以获取 html 内容并将其加载到 div 中。除了仅在第一个请求期间出现的加载程序外，一切正常。

这是我的代码

$(document).ready(function() {

 $('#loader')
.hide()  // hide it initially
.ajaxStart(function() {
    $(this).show();
})
.ajaxStop(function() {
    $(this).hide();
});

var uri_segment = "<?=$this->uri->segment(3);?>";


$('#editTeam').click(function (e) {

    e.preventDefault();
    $(this).parent().siblings().removeClass('active');

    $(this).parent('li').addClass('active');



    $.ajax({
        type : "GET",
        async : true,
        url : "<?=base_url().'ajax/team/get_editTeam/';?>"+uri_segment,
        dataType : "html",
        success : function(data){
                $('#divPage').html(data);

        }
    });

    return false;
});

$('#editRights').click(function (e){
    e.preventDefault();

    $(this).parent().siblings().removeClass('active');


    $(this).parent('li').addClass('active');

    $.ajax({
        type : "GET",
        async : false,
        url : "<?=base_url().'ajax/team/get_editRights/';?>"+uri_segment,
        dataType : "html",
        success : function(data){
                $('#divPage').html(data);
        }
    });
    return false;
});


$('#addMember').click(function (e){

    e.preventDefault();

    $(this).parent().siblings().removeClass('active');


    $(this).parent('li').addClass('active');



        $.ajax({
            type : "GET",
            async : false,
            url : "<?=base_url().'ajax/team/get_addMember/'.$this->uri->segment(3);?>",
            dataType : "html",
            success : function(data){
                $('#divPage').html(data);

            }
        });
        return false;
});


});

Answer 1

尝试将ajaxStart/移动ajaxStop到文档上。根据文档，从 1.8 开始，您应该只将其绑定到文档。

$('#loader').hide();

$('document')
  .ajaxStart(function() {
    $('#loader').show();
  })
  .ajaxStop(function() {
    $('#loader').hide();
  });