Javascript jquery.magnific-popup在ajax发布后生成时不工作

我的问题是，当我在ajax post之后从jquery向div追加内容时，弹出式放大镜根本不起作用

我正在使用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
            }
        });
    });

这是我的部门

<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>
<%} %>

但我需要在文件输入上载时附加到div，因此我执行了以下操作：

 $('#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]);
}});   

当你打电话的时候

$('.image-popup')

之后的任何事情。它只适用于当时存在的元素。例如$'.image popup'.clickfunction{alertclick；}；将只为存在的元素放置一个事件处理程序，因此附加任何新元素都不会有该单击处理程序，这就是为什么我们需要对动态添加的元素使用事件委派

这一点在这里也适用

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

将仅告诉放大弹出有关当时存在的图像弹出窗口的信息。当你以后添加新的，它不知道他们

因此，在添加新元素后，您需要重新调用放大弹出初始化。

而不是document.ready在添加div后，您可以在ajax成功中使用放大弹出。