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