Magnific PopUp not Working with the Dynamically Added Elements

Question

We are using the Magnific library to display the PopUps in our site. Everything with this is going well except one thing.

when we add an element dynamically, popup is not working for the dynamically added elements. Can you please help me how I can bind the click event for the dynamically added element to display the popup? Here is my code is given below:

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

The class is responsible for displaying the pop-up but it doesn't work for the dynamically added elements.

In other words, the click event is not getting registered in the DOM for the newly added elements.

Answer 1

You need to bind the popup to each new element after they are loaded in the dom. That means calling PopupDelVisArchiv(); for each new element once dom ready.