Ошибка: "не удается вызвать методы для кладки до инициализации" при объединении кладочной сетки с поиском и фильтром плагина WordPress

Question

Я пытаюсь использовать сетку Masonry с плагином WordPress Search и Filter Pro, используя ajax для загрузки постов после фильтрации. Я получаю ошибку:

Ошибка: "не может вызывать методы для кладки до инициализации; попытался вызвать reloadItems

И Masonry, и Search and Filter решают эту проблему.

Masonry рекомендует использовать этот код:

$grid.imagesLoaded( function() {
  // init Masonry
  $grid.masonry({
    // options...
  });
  // Masonry has been initialized, okay to call methods
  $grid.append( $items )
    .masonry( 'appended', $items );
});

Search and Filter рекомендует использовать этот код:

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    //so load your lightbox or JS scripts here again
});

Итак, я включил это и мой окончательный код:

(function ($) {
    var $container = $('.grid');

    $container.imagesLoaded(function () {
        // INITIALIZE MASONRY
        $container.masonry({
            itemSelector: '.entry',
            columnWidth: '.entry',
            gutter: 40,
        });
        // MASONRY HAS BEEN INITIALIZED, OKAY TO CALL METHODS
        $(document).on("sf:ajaxfinish", ".searchandfilter", function () {
            $container.masonry('reloadItems');
        });
    });

}(jQuery));

но ничего не меняется. Я получаю ту же ошибку.

Answer 1

Это то, что я использовал.

jQuery(document).ready(function($) {    

function loadMasonry(){

    //$container will always be a new copy
    var $container = $('.featured-grid-thirds');

    //running images loaded again after page load / ajax event 
    $container.imagesLoaded(function () {
        // INITIALIZE MASONRY
        $container.masonry({
            itemSelector: '.featured-grid-item',
            columnWidth: '.featured-grid-sizer',
            gutter: '.gutter-sizer',
            percentPosition: true
        });
        // Masonry has been initialized, okay to call methods
        // reload masonry
        $container.masonry('reloadItems');
    });
}

//Call on page load etc...
loadMasonry();

//then also call it after ajax event
$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
    console.log("ajax complete");
    loadMasonry();
});


});