Question

我正在尝试使用带有WordPress插件的Masonry网格搜索和过滤器专业版使用ajax在过滤时加载帖子。我收到了错误：

错误：“在初始化之前无法调用砌体上的方法;试图调用'reloadItems'“

Masonry建议使用此代码：

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

搜索和过滤建议使用此代码：

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


});

错误：将砌体网格与搜索和过滤WordPress插件

1 个答案: