无限滚动与Magnific Popup回调

我正在使用Infinite滚动和Magnific Popup。

弹出窗口对“第1页”的内容起作用，但之后失败。 我试图在infiniteScroll调用中使用MagnificPopup的回调。

$grid.infiniteScroll({ path: '.pagination__next', append: '.grid__item', outlayer: msnry, status: '.page-load-status', }, function( newElements ) { $('.open-pop').magnificPopup({ type: 'inline', mainClass: 'mfp-fade', fixedContentPos: false, gallery: { enabled: true, navigateByImgClick: false, } }); }); 

我的问题类似于这个Magnific弹出窗口和无限滚动 ，我试图实现它是不成功的。

可能是一个额外的复杂因素是我正在使用砌体。 这是我的完整代码：

 // init Masonry var $grid = $('.grid').masonry({ itemSelector: 'none', // select none at first columnWidth: '.grid__col-sizer', gutter: 26, percentPosition: true, stagger: 30, // nicer reveal transition visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); // get Masonry instance var msnry = $grid.data('masonry'); // initial items reveal $grid.imagesLoaded( function() { $grid.removeClass('are-images-unloaded'); $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); $grid.infiniteScroll({ path: '.pagination__next', append: '.grid__item', outlayer: msnry, status: '.page-load-status', }, function( newElements ) { $('.open-pop').magnificPopup({ type: 'inline', mainClass: 'mfp-fade', fixedContentPos: false, gallery: { enabled: true, navigateByImgClick: false, } }); }); 

Answer 1

使用onInit事件进行回调函数。

 onInit: function() { this.on( 'append', function() {...}) }