Question

我在使用jQuery插入文件输入元素时遇到问题。我想要发生的是当用户使用input元素选择文件时，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

代表

的示例

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

});

.live

.delegate

When You Should Use jQuery’s Live and Delegate Methods

Answer 2

您添加的新输入没有任何onchange事件处理程序。如果将事件处理程序放在命名函数中，则可以轻松地将其绑定到您创建的新输入：

function handleChange(){
  // 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" />').change(handleChange)
  );
}

$('#select_images input').change(handleChange);

使用jQuery插入文件输入元素

2 个答案: