Question

我们正在使用Magnific库在我们的网站中显示PopUps。除了一件事之外，所有这一切都很顺利。

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

`<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();
});`

该班负责显示弹出窗口但它对动态添加的元素不起作用。

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

Answer 1

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

Magnific PopUp不使用动态添加的元素

1 个答案: