为什么jQuery文件上传在首次上传后停止工作？

Question

我正在使用jQuery文件上传插件.我正在隐藏文件输入并在单击一个单独的按钮时激活它.(见这个小提琴.)

HTML:

<div>
    <button class="browse">Browse</button>
    <input id="upload" type="file" style="display: none;" />
</div>

JavaScript的:

var element = $("#upload");

$(".browse").click(function () {
    $("#upload").trigger("click");
});

element.fileupload({
    add: function () {
        alert("add");
    }
});

请注意,如果您按下按钮然后选择一个文件,该add方法将被激活,您将收到警报.再做一遍,你会得到另一个警报.

现在,看到这个小提琴.唯一的区别是我改变了以下行

$("#upload").trigger("click");

至

element.trigger("click");

请注意,现在,当您第一次单击该按钮然后选择一个文件时,该add方法将被激活,您将获得警报(就像之前一样),但如果再次执行此操作,则该add方法永远不会激活.

造成这种行为差异的原因是什么？

Answer 1

如文档所述,这也可以通过设置replaceFileInput来解决.这是因为插件在每次上传后重新创建输入元素,因此绑定到原始输入的事件将丢失.false

Answer 2

看起来好像element在添加功能之后丢失/改变了范围.如下所示重置它似乎工作.

var element = $("#upload");

$(".browse").click(function () {
    element.trigger("click");
});

element.fileupload({
    add: function () {
        alert("add");
        element = $(this);
    }
});

小提琴