使用 Ajax 调用和图像/链接单击创建的新 Div 被禁用答案

【问题标题】：New Div Created WIth Ajax Call and Image/Link Click Gets Disabled使用 Ajax 调用和图像/链接单击创建的新 Div 被禁用
【发布时间】：2016-07-14 07:32:27
【问题描述】：

我在一个项目中有一个图像上传器，并使用完美的 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>

问题是上传图片后，图片显示在内容中，但无法点击图片，并且“删除”链接与似乎也被阻止的每张图片相关联。然后当我刷新整个页面时，点击图片和链接就可以了。我不确定为什么会这样？在浏览器的检查元素中，我可以看到新创建的 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);
                }
            });
        });
    });

【问题讨论】：

按钮点击的代码是什么？这是在 jquery 还是纯 asp 中？
我正在使用 C# 从代码隐藏绑定动态控件，并在前端使用 Ajax 进行按钮单击（基本上超链接用作按钮）。我已经发布了删除代码。此部分在 Ajax 部分刷新后被禁用。
使用 jquery on 从动态创建的元素中捕获事件，所以不要将 $('#divImages A.deleteLink').click(function () { 改为 $('#divImages A.deleteLink').on('click', function () {
尝试了上述方法。它仍然没有删除。我必须刷新整个页面才能使其正常工作。
试试这个：$('body').on('click', '#divImages a.deleteLink', function() { 我想知道你为什么使用A而不是a

标签： c# jquery asp.net ajax

【解决方案1】：

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

在 cmets 部分查看我的解释

$('body').on('click', '#divImages a.deleteLink', function() {

【讨论】：