Demo Fiddle

Question

我正在使用jQuery .on()来获取动态元素上的click事件，如下所示：

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

然后我创建另一个.on()事件，使用以下命令检测生成按钮的点击：

$("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);
});

当我尝试更新span标记中的html时，更新过程仅在我按两次.upload()按钮后才会发生。

首次在input标记中选择项目时，不会更新它应该的span。再次按下按钮会更新标签。

Answer 1

点击活动有2个。第一个按钮创建第一个按钮，第二个按钮负责上传。取消第一个on on click事件，而不是在文档准备好时创建它。这样，上传按钮就已经存在，您只需要点击一次。

这是我要做的：

$( 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);
});

Fiddle Here

Answer 2

此处的问题是 jquery does not wait for you to finish the file selection here

所以我添加了 onChange method of your input type file

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

使用jQuery更新动态元素

2 个答案:

Demo Fiddle