带有 Magnific Popup 回调的无限滚动答案

【问题标题】：infinite Scroll with Magnific Popup callback带有 Magnific Popup 回调的无限滚动
【发布时间】：2017-09-21 16:09:34
【问题描述】：

我正在使用无限滚动和 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 popup and infinite scrolling 类似，我尝试实施该问题未成功。

我正在使用 Masonry 可能会增加一个复杂性。这是我的完整代码：

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

});

【问题讨论】：

你能提供一个演示小提琴吗？我假设您的回调事件不正确。为什么不尝试使用 onInit onInit: function() { this.on( 'append', function() {...}) } 添加回调
使用 OnInit 成功了，感谢您为我指明了正确的方向。
很高兴为您提供帮助:)
@Developer107 您应该将此作为答案发布，以便 OP 可以关闭问题。
@bhansa 谢谢提醒 :)

标签： jquery callback infinite-scroll magnific-popup

【解决方案1】：

使用onInit事件作为回调函数。

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

【讨论】：