javascript - Magnific PopUp 不适用于动态添加的元素

Question

我们正在使用 Magnific 库在我们的站点中显示弹出窗口。除了一件事，一切都进展顺利。

当我们动态添加元素时，弹出窗口不适用于动态添加的元素。你能帮我如何绑定动态添加元素的点击事件以显示弹出窗口吗？这是我的代码如下：

`<a id="del-vis-archive-new-{{$request->id}}" href="#delete-visitor-archive" data-id="{{$request->id}}" class="popup-form-delete-visitor-archive" style="color:red;"><i style="color:red; text-align: right;" class="hi hi-trash"></i></a>

var PopupDelVisArchive = function() {
$('.popup-form-delete-visitor-archive').magnificPopup({
    type: 'inline',
    preloader: false,
    focus: '#name',
    callbacks: {
        open: function() {
            var dataId = $(this.st.el).attr('data-id');
            $("#btn").attr('data-id', dataId);
        }
    }
});

}

$(document).on( 'init.dt, draw.dt', function ( e, settings ) {
    PopupDelVisArchiv();
});`

该类负责显示弹出窗口，但它不适用于动态添加的元素。

换句话说，click 事件没有在 DOM 中注册新添加的元素。

Answer 1

在将弹出窗口加载到 dom 中后，您需要将它们绑定到每个新元素。这意味着一旦 dom 准备好就调用PopupDelVisArchiv();每个新元素。