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

Question

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

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);

Answer 1

我找到了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');

});

Answer 2

您也可以使用delegate option：

delegate