jquery - 使用 jQuery 插入文件输入元素

Question

我在使用 jQuery 插入文件输入元素时遇到问题。我想要发生的是，当用户使用输入元素选择文件时，jQuery 应该隐藏该输入并在其位置插入一个新的文件输入。

这是我的相关标记:

<div id="select_images">
    <input type="file" name="images[]" multiple="multiple" />
</div>

还有我的 JavaScript:

$('#select_images input').change(function(){
    // User selected some images to upload, hide this file input
    $(this).css('right', '-10000px');

    // Insert a new file input to take its place
    $('#select_images').append('<input type="file" name="images[]" multiple="multiple" />');
});

这确实有效。当我使用页面上已有的文件输入选择一个文件时，jQuery 会隐藏它并插入一个新文件。然而，当我尝试再次执行相同操作时，jQuery 不会插入新的文件输入。

我看不出上面的代码只会插入一个额外的文件输入的任何原因，所以我很困惑。我已经使用 Firebug 和将表单数据发布到我的后端脚本来确认此行为。

感谢任何帮助。谢谢!

Answer 1

尝试使用实时

$('#select_images input').live('change',function(){...

当您将元素动态添加到 DOM 时，事件处理程序不会自动附加到它们，要将事件处理程序附加到动态添加的元素，您可以使用 .live 或 。委托(delegate)

委托(delegate)示例

$("#select_images").delegate('input','change',function(){
//handler code here

});

.live

.delegate

When You Should Use jQuery’s Live and Delegate Methods