jquery.magnific-在 ajax post 之后生成时弹出窗口不起作用

Question

我的问题是，当我在 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

<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"); }); 只会为那些存在的元素放置一个事件处理程序，因此附加任何新元素都不会有该点击处理程序（这就是为什么我们需要为动态添加的元素使用事件委托）。

这里也是一样。

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

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

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

jquery.magnific-在 ajax post 之后生成时弹出窗口不起作用

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

javascript

ajax

jquery

magnific-popup