使用jQuery不能动态添加多个元素

Question

我正在使用ASP.NET制作多文件上传器，并且我知道IE在<input type="file"/>内不支持multiple属性。

所以我写了一个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

在click事件上，您将添加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插入新元素时，都必须创建一个新元素。 Append会将元素从旧的父级移出。 其次，runat =“ server” afaik是asp.net属性，在html中绝对不起作用。 如果使用javascript创建元素，则必须进行发布并自己填充。