jQuery: Call-Funktion nach Ajax hat komplett gerendert

Question

Ich verwende eine Funktion pinterest_it(), um eine Ansicht mit masonry.js einzustellen und ich benutze eine andere Funktion recipeLoader(), um ein Laden-Symbol zu zeigen, bis die Seite vollständig geladen wird, dann Inhalte anzuzeigen. Dies funktioniert bei der Seitenaktualisierung, aber wenn ich Inhalt mit Ajax einlege, wird meine $(window).load(...) Funktion nie ausgelöst.

So wird die Funktion Anruf nach allem, was völlig Lasten machen können (nicht .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') 
}); 

ich $(x).ready(...) ohne Glück, sowie ajaxComplete() versucht haben. Vielleicht gibt es eine Möglichkeit, $(x).load(...) mit einem bestimmten Element statt Fenster zu verwenden, um die Funktion zu ermöglichen, zu feuern? Ich habe versucht, es auf $("#recipe-index") anzurufen, aber das hat auch nicht funktioniert.

Answer 1

$ (window) .load wird nicht bei Erfolg/Abschluss einer Ajax-Anfrage ausgelöst. Bewegen Sie, dass etwas auf seine eigene Funktion:

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

Und es dann in $ aufrufen (Fenster) .load & den Erfolg Ajax Rückruf

$(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') 
});