jQuery：ajax完全呈现后调用函数

Question

我正在使用函数pinterest_it() 来调整带有masonry.js 的视图，并且我正在使用另一个函数recipeLoader() 来显示加载图标，直到页面完全加载，然后显示内容。这适用于页面刷新，但是当我使用 ajax 加载内容时，我的 $( window ).load(...) 函数永远不会触发。

如何在所有内容完全加载（不是.ready）后进行函数调用

function pinterest_it() {
    $(".loader").show(); # shows loading icon
    $("#recipe-index").css("opacity", 0); # makes content invisible

    if ( $(document).innerWidth() < 991 ) {
        gutter = 0
    } else {
        gutter = 16
    }

    var $grid = $('.grid').imagesLoaded( function() {

        var $blah = $('.grid').masonry({
            itemSelector: '.grid-item',
            columnWidth: function( containerWidth ) {
                return $('.grid-sizer').width();
            },
            percentPosition: true,
            gutterWidth: gutter
        });

    }, fixGrid())

    recipeLoader(); # see below
}

function recipeLoader() {
    console.log("recipe loader")
    $(window).load(function() { # doesn't fire after Ajax completes!
        console.log("loaded")
        $(".loader").hide(); # hides loading icon
        $("#recipe-index").animate({
            opacity: 1 # shows content
        }, 400);
    });
}

# one of the Ajax function that calls pinterest_it()
$(".togglebutton input").click(function () {
    console.log($(this).serialize());
    $.get(this.action, $('#recipes_search').serialize(), function() {
        pinterest_it();
    }, 'script')
});

我尝试过$(x).ready(...) 和ajaxComplete()，但都没有成功。也许有某种方法可以将$(x).load(...) 与特定元素而不是窗口一起使用来允许函数触发？我试过在 $("#recipe-index") 上调用它，但也没有用。

Answer 1

$(window).load 不会在 Ajax 请求成功/完成时触发。将该位移动到它自己的函数中：

  function handlePageRefresh () {
    console.log("loaded")
    $(".loader").hide(); # hides loading icon
    $("#recipe-index").animate({
        opacity: 1 # shows content
    }, 400);
 }

然后在 $(window).load & Ajax 成功回调中调用它

$(window).load(function() { # doesn't fire after Ajax completes!
    handlePageRefresh()
});

# one of the Ajax function that calls pinterest_it()
$(".togglebutton input").click(function () {
    console.log($(this).serialize());
    $.get(this.action, $('#recipes_search').serialize(), function() {
      handlePageRefresh()
      pinterest_it();
    }, 'script')
});