Javascript 使用jQuery更新动态元素

我使用jQuery

.on（）

获取动态元素上的单击事件，如下所示：

$("body").on("click", "#books tr", function() {
    ....
    // generates a button
    $("#result").append("<button class='upload'>Upload</button>"+
                        "<input type='file' class='hidden'><span></span>");
});

当我试图更新span标记中的

html

时，更新过程仅在我按下

.upload（）

按钮两次后才会发生

---

第一次在

输入

标记中选择项目不会更新它应该更新的

span

。再次按下按钮更新标签。

您有两个点击事件。第一个按钮创建第一个按钮，第二个按钮负责上传。第一次取消单击事件，您可以在文档准备就绪时创建它。这样，上载按钮就已经存在，您只需单击一次

下面是我要做的：

$( document ).ready(function() { // <-- this is what I replaced!
    // generates a button
    $("#result").append("<button class='upload'>Upload</button>" +
        "<input type='file' class='hidden'><span></span>");
});

$("body").on("click", ".upload", function () {
    // which alters the element previously created by the .on() even before.
    var input = $(this).next("input");

    $(input).click();

    var upload = $(input).val();
    $(input).next("span").html(upload);
});

---

$（document）.ready（function（）{/这里的问题是
jquery没有等待您在这里完成文件选择

$('body').on("change", "#hidden", function (){
    var upload = $(this).val();
    $(this).next("span").html(upload);
});

因此，我为您的输入类型文件添加了一个onChange方法

$('body').on("change", "#hidden", function (){
    var upload = $(this).val();
    $(this).next("span").html(upload);
});

你应该为它创建一个演示。这不仅是为了得到更好的答案，而且是为了让你自己从当前的文档中看到这一点。这对我尝试做一个简单的演示非常有帮助，只关注失败的地方parts@Namit您可能希望接受其中一个答案作为正确答案；）