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

这同样适用于此。

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

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

所以你需要在添加新元素后回想起你的magnificPopup初始化。

jjery.magnific-popup在ajax post后生成时无法正常工作

1 个答案: