jquery.magnific-popup not working when generated after ajax post

Question

my problem is when i append to the div from jquery after ajax post the popup magnifier does not work at all

i am using jquery.magnific-popup

    $(document).ready(function () {
        $('.image-popup').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            mainClass: 'mfp-fade',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
            }
        });
    });

and this is my div

<div id="officialDiv" class="row m-b-15">
<%
    for (int i = 0; i < officialDocsList.Count; i++)
    {
%>
<div class="col-sm-6 col-lg-3 col-md-4 mobiles" style="flex: 0 0 15%; max-width: 15%;">
    <div class="product-list-box thumb">
        <a href="<%= officialDocsList[i] %>" class="image-popup" title="Screenshot-1">
            <img style="width:100px;height:100px;" src="<%= officialDocsList[i] %>" class="thumb-img" alt="work-thumbnail">
        </a>

        <div class="product-action">
            <a href="#" class="btn btn-danger btn-sm"><i class="md md-close"></i></a>
        </div>
    </div>
</div>
<%} %>

but i need to append to the div on file input upload so i did the below :

 $('#officialDoc').on('change', function (event) {
var files = $("#officialDoc").prop("files");
for (var i = 0; i < files.length; i++) {
    (function (file) {
        var fileReader = new FileReader();
        fileReader.onload = function (f) {
            var d = f.target.result;
            var img = d.split("base64,").pop();
            var byteArray = _base64ToArrayBuffer(img);

            $.ajax({
                type: "POST",
                url: "BusinessLogic/SaveTempFiles.ashx",
                data: {
                    'file': img,
                    'name': file.name
                },
                success: function (result) {
                    $("#OfficialDocsPath").val($("#OfficialDocsPath").val() + ',' + result);
                    $("#officialDiv").append("<div class='col-sm-6 col-lg-3 col-md-4 mobiles' style='flex: 0 0 15%; max-width: 15%;'><div class='product-list-box thumb'><a href='" + result + "' class='image-popup' title='Screenshot-1'><img src='" + result + "' class='thumb-img' style='width:100px;height:100px;' alt='work-thumbnail'></a><div class='product-action'> <a href='#' class='btn btn-danger btn-sm'><i class='md md-close'></i></a> </div></div> </div>");
                }
            });
        };
        fileReader.readAsDataURL(file);
    })(files[i]);
}});   

Answer 1

When you call

$('.image-popup')

(with anything after the .) it will only apply to the elements that exist at that time. eg $('.image-popup').click(function() { alert("click"); }); will only put an event handler for those that exist so appending any new elements will not have that click handler (which is why we need to use event delegation for dynamically added elements).

The same applies here.

$('.image-popup').magnificPopup({

will tell magnificPopup only about the image-popups that exist at that time. When you add new ones later, it doesn't know about them.

So you need to recall your magnificPopup initialisation after you add the new elements.