jQuery Magnific Popup and .on

Question

I am currently using MagnificPopup for an "edit" form. What this form does is allows the user to edit a row. Once the user is done editing, it replaces that row with the updated content.

Within that updated content, there is an "edit" button which will bring up the edit form again.

The problem I am running into is that after editing an item, when clicking the edit button on that same item, it is not opening the form, due to the "edit" link being now being dynamic content.

Here is the code I am referring to, which opens the popup:

$('.simple-ajax-popup').magnificPopup({
    type: 'ajax'
});

Is there a way to replace this using .on so that it works properly? Something along these lines:

$(document).on('magnificPopup', '.simple-ajax-popup', function (e) {
    type: 'ajax'
});

I can't seem to figure out how to use it here.

The closest I can find within the documentation is this bit of code, which is a little unclear to me:

$('.image-link').on('mfpOpen', function(e /*, params */) {
  console.log('Popup opened',  $.magnificPopup.instance);
});

Answer 1

Figured it out!

$(document).on('click', '.simple-ajax-popup', function (e) {

    e.preventDefault();

    $.magnificPopup.open({
        items: {
            src: $(this).attr('href')
        },
        type: 'ajax'
    });

});