Question

我在项目中使用图像上传器并使用Ajax上传图像，效果很好。它立即显示上传的图像，无需刷新页面。以下是我用来上传图片的代码：

<script>
$(function () {
            $('#btnUpload').click(function () {
                var fileUpload = $("#FileUpload1").get(0);

                var files = fileUpload.files;
                var test = new FormData();
                for (var i = 0; i < files.length; i++) {
                    test.append(files[i].name, files[i]);
                }

                $.ajax({
                    url: "../UI/Upload.ashx",
                    type: "POST",
                    contentType: false,
                    processData: false,
                    data: test,
                    success: function (result) {
                        alert(result);
                        //This section refreshes the div with uploaded images and shows images without full page refresh
                        $('#divImages').load(document.URL + ' #divImages');
                    },
                    error: function (err) {
                        alert(err.statusText);
                    }
                });
            });
        });
</script>


<input type="file" id="FileUpload1" />
<input type="button" id="btnUpload" value="Upload Files" />

 <div id="divImages" clientidmode="Static" runat="server">
    <asp:Label ID="labelImages" ClientIDMode="Static" runat="server"></asp:Label>
 </div>

问题是在上传图片后，图片会显示在内容中，但无法点击图片，并且删除＆＃39; 删除＆＃39;链接与每个似乎也被阻止的图像相关联。然后当我刷新整个页面时，点击图像和链接就可以了。我不确定为什么会这样？在浏览器的inspect元素中，我可以看到里面创建的新div，如下所示：

 <div id="divImages"> //The newly created div after partial refresh with Ajax every time I upload image
   <div id="divImages" clientidmode="Static" runat="server">
     <asp:Label ID="labelImages" ClientIDMode="Static" runat="server"></asp:Label>
   </div>
 </div>

是否阻止我点击图片/按钮或其他任何内容？如果有人指出，将不胜感激。

这是我用于删除带链接的图片的代码（基本上我使用链接作为按钮）：

 $('#divImages a.deleteLink').click(function () { //Ajax used to delete images from 'Images' folder with jQuery

            var image = $(this).attr("img");
            $.ajax({
                type: "POST",
                url: "../UI/DeleteImage.ashx",
                data: "imageName=" + image,
                contentType: 'application/x-www-form-urlencoded',
                success: function (response) {
                    if (response == "true") {
                        $('#divImages a.imageLink[imgsrc*=\"' + image + '\"]').fadeOut();
                        $('#divImages a.deleteLink[img=\"' + image + '\"]').fadeOut();
                    }
                },
                error: function (response) {
                    alert('There was an error. ' + response);
                }
            });
        });
    });

Answer 1

OP要求我将此作为答案发布，我无能为力。

请参阅评论部分中的解释

bar

使用Ajax调用创建的新Div和图像/链接单击获取已禁用

1 个答案: