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

Question

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

当我们动态地添加一个元素时，popup对于动态添加的元素不起作用。你能帮我一下，我可以如何绑定动态添加元素的点击事件来显示弹出窗口？这里是我的代码如下：

`<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

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