javascript - 使用 jQuery 无法动态添加多个元素

Question

这个问题已经有答案了:

Why do multiple `.appendTo` calls on a newly created jQuery element only append it once? (2 个回答)

已关闭 8 个月前。

我正在使用 ASP.NET 制作一个多文件 uploader ，我知道 IE 不支持 multiple <input type="file"/> 内的属性。

所以我编写了一段 jQuery 代码来检查用户是否使用 IE。如果是，则显示一个按钮，让用户添加多个文件上传控件，这样他也可以上传多个文件。

问题是，当用户单击该链接时生成 <input/>控件，然后再次单击以添加第三个。什么都没发生! ..只添加了一个控件，因此需要使用两个控件。不再了，无论他点击多少次都不再<input/>添加了控件。

这是我的代码:

$(function () {
    if (!('multiple' in document.createElement('input'))) {
        var add_btn = $("<a href='#'>Add more photos</a>").insertAfter("#ContentPlaceHolder1_upload_lbl");
        var upload_pnl = $('<input type="file" runat="server"/>');
        var upload_holder = $("#fileinput_placeholder");
        add_btn.on("click", function () {
            upload_holder.append(upload_pnl);
            alert("click event called(debugging)");
        });
    }
});

这是该部分的节点树的图片:

Answer 1

在点击事件中，您将附加 upload_pnl，并且每次连续点击都会附加相同的元素，因此您只会获得 2 个元素。

要添加更多内容，您需要在单击事件回调中创建元素，或者使用类似 jquery clone 的内容。函数来创建一个新的。

var upload_pnl = $('<input type="file" runat="server"/>');
var upload_holder = $("#fileinput_placeholder");
add_btn.on("click", function () {
    upload_pnl.clone().appendTo(upload_holder);
    alert("click event called(debugging)");
});

此外，fscan 指出 runat="server"不会使这个新元素在后面的代码中可访问，因为页面现在是客户端。