盛大PopUpが動的に追加された要素で動作しない

Question

私たちは、Magnificライブラリを使用して、私たちのサイトにPopUpsを表示しています。これを持つものはすべて、1つのことを除いてうまくいっています。

要素を動的に追加すると、動的に追加された要素に対してポップアップが機能しません。動的に追加された要素のクリックイベントをバインドしてポップアップを表示する方法を教えてください。ここに私のコードは以下の通りです：

`<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にロードされた後で、新しい要素にポップアップをバインドする必要があります。これは、新しい要素ごとにPopupDelVisArchiv();を呼び出すことを意味します。