Вставка элемента ввода файла с использованием 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 и POST, добавляя данные формы в мой серверный скрипт.

Любая помощь приветствуется. Спасибо!

Answer 1

Попробуйте использовать вживую

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

когда вы динамически добавляете элементы в DOM, обработчики событий не присоединяются к ним автоматически, чтобы прикрепить обработчики событий к динамически добавляемым элементам, которые вы можете использовать .live или же .delegate

пример с делегатом

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

});

.live

.delegate

Когда вам следует использовать методы Live и Delegate jQuery

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);