jQuery：ajaxが完全にレンダリングされた後に関数を呼び出す

Question

私はmasonry.jsでビューを調整するために関数pinterest_it()を使用しています。ページが完全にロードされ、コンテンツが表示されるまで別の関数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') 
}); 

私は運だけでなく、ajaxComplete()なしで$(x).ready(...)を試してみました。おそらく、関数であることを可能にするために、ウィンドウではなく特定の要素に$(x).load(...)を使用するいくつかの方法がありますか？私は$("#recipe-index")でそれを呼び出そうとしましたが、それもうまくいきませんでした。

Answer 1

Ajaxリクエストの成功/完了時に$（ウィンドウ）.loadは起動しません。独自の関数にそのビットを移動：

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

そして$（ウィンドウ）それを呼び出すの間に遅延があるので、これはまだ動作しません& 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') 
});