将 magnificPopup 添加到动态创建的元素答案

【问题标题】：Add magnificPopup to dynamic created element将 magnificPopup 添加到动态创建的元素
【发布时间】：2019-02-08 04:01:39
【问题描述】：

我使用下面的代码，它会弹出我想要的内容

function init_magnificPopup()
{
    $('.popup-with-zoom-anim').magnificPopup({

        type: 'inline',

        fixedContentPos: false,
        fixedBgPos: true,

        overflowY: 'auto',

        closeBtnInside: true,
        preloader: false,

        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
    });
}

$(document).ready(function() {
    init_magnificPopup();
});

HTML

<a class="btn btn-primary popup-with-zoom-anim" href="#dialog">dialog popup</a> 

<div id="dialog" class="zoom-anim-dialog mfp-hide">
popup content
</div>

现在我如何使用下面的动态创建的标签 .popup-with-zoom-anim？

var content_string +=  '<a class="popup-with-zoom-anim" href="#dialog">dynamic dialog popup</a>';
$( "body" ).html(content_string);

【问题讨论】：

标签： javascript jquery magnific-popup

【解决方案1】：

你也可以使用delegate option:

$('body').magnificPopup({
    delegate: 'a.popup-with-zoom-anim',
    type: 'inline',
    ...
});

【讨论】：

【解决方案2】：

我找到了answer，它使用.on()方法并将.magnificPopup('open');链接到末尾

$("body").on('click', '.popup-with-zoom-anim', function(){ 

     $(this).magnificPopup({

                type: 'inline',

                fixedContentPos: false,
                fixedBgPos: true,

                overflowY: 'auto',

                closeBtnInside: true,
                preloader: false,

                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            }).magnificPopup('open');

});

【讨论】：