javascript - jquery.magnific-popup 在 ajax post 后生成时不起作用

Question

我的问题是，当我在ajax发布后从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

<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]);
}});   

Answer 1

当你打电话时

$('.image-popup')

(在 . 之后的任何内容)它仅适用于当时存在的元素。例如 $('.image-popup').click(function() {alert("click"); }); 只会为那些存在的元素放置一个事件处理程序，因此附加任何新元素将没有该点击处理程序(这就是为什么我们需要对动态添加的元素使用事件委托(delegate))。

这同样适用于这里。

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

只会告诉magnificPopup当时存在的image-popup。当您稍后添加新的时，它不会知道它们。

因此，在添加新元素后，您需要调用 magnificPopup 初始化。