Javascript 如何将项目动态添加到放大弹出式库中

我在我的页面上使用放大弹出和洗牌插件。当用户到达页面底部时，我立即加载新项目。我想做的是在加载新项目后将它们绑定到放大弹出窗口。 我试图遵循这个答案，但它对我不起作用

下面是我使用的js代码。 首先，加载页面后，我使用此代码设置MP

// gallery mode
$('.gallery-item').magnificPopup({
    gallery: {
        enabled: true
    },
    mainClass: 'mfp-fade',
    fixedContentPos: false,
    type: 'image'
}); 

然后，一旦用户到达页面底部，if请求JSON文件

$.getJSON( "list-dir.php")
          .done(function( data ) {

            var diff = Object.keys(data).length - $(".item").length;
            var NUM_TO_LOAD = diff > 10 ? 10 : diff;
            if(Object.keys(data).length > $(".item").length){
                for(var i = 0 ; i<= 10; i++) {
                    var el = data[$(".item").length];
                    if (el === undefined) { break; }
                    var name = el.substring(0,el.indexOf("_") );
                    var $item = $('<div class="item shuffle-item filtered" data-groups="photo" data-groups="photo"><a href="img/dresses/'+ el + '" class="gallery-item item-link" style="margin: 10px;"><div class="item-img" style="background-image: url(\'img\/dresses\/' + el + '\' )"></div><div class="item-overlay"><h5>'+ name +'</h5></div></a></div>');

                    //Shuffle update
                    $('.portfolio').append($item);
                    $('.portfolio').shuffle('appended', $item);

                    // get instance (after popup was opened)
                    var mfp = $.magnificPopup.instance;
                    // modify the items array (push/remove/edit)
                    mfp.gallery.push({
                        src: $item
                    });
                    mfp.updateItemHTML();
                }
            }
        });

$.getJSON（“list dir.php”）
.完成（功能（数据）{
var diff=Object.keys（data）.length-$（“.item”）.length；
var NUM_TO_LOAD=diff>10？10:diff；
if（Object.keys（data）.length>$（“.item”）.length）{
对于（var i=0；iYou应该在每次获得新内容时初始化放大弹出。这与hum上发生的问题相同，不确定这是否是同一个问题。我的问题是初始化MP，但没有成功。我有类似的问题，你解决了吗？你应该在每次获得新内容时初始化放大弹出。这是同一个问题嗯，不确定这是同一个问题。我的问题是初始化MP，但没有成功。我有类似的问题，你解决了吗？