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

Question

我正在使用ASP.NET创建一个多文件上传器，我知道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。

要添加更多内容，您需要在click事件回调中创建元素，或者使用类似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”不会在后面的代码中访问这个新元素，因为页面现在是客户端。

Answer 2

首先，每次使用append插入时都必须创建一个新元素。追加将从旧父级移动元素。 其次，runat =“server”afaik是一个asp.net属性，在html中绝对没有。如果你用javascript创建元素，你必须自己做帖子。