Динамически генерировать тип ввода = «файлы» для множественной загрузки

Question

У меня есть проблема, которую я пробовал решить самостоятельно. Но я этого не сделал. Я создаю скрипт, который может загружать несколько изображений за один раз. Я получаю одно поле входного файла в первый раз, и я написал JavaScript, если кто-то добавил фотографию для поля для загрузки, а затем автоматически создаст новое поле для загрузки. Он работает хорошо в первый раз. Он успешно создал новое поле для загрузки. Но он не генерируется во второй раз. Я предполагаю, что у вас есть знания об бутстрапе.

вот мой HTML код

<input type ="file" class ="fileup 1" id ="file1"> 
<label for ="file1" id ="lbl_upload"> 
<span class ="glyphicon glyphicon-plus-sign"></span></label> 
<div class ="photos"> </div> 

здесь мой код JavaScript

var count = 1; 
$("#file1" + count).on('change', '.fileup', function() { 
    var files, imagetype, matches; 
    files = this.files[0]; 
    imagetype = files.type; 
    matches = ["image/jpeg"]; 
    var str = "#img_nxt" + count; 
    if (!(imagetype == matches[0])) { 
     alert("Wrong format"); 
    } else { 
     $('#lbl_upload').remove(); 
     $('.photos').append("<img id='img_nxt" + count + "' width ='100' height ='100'> "); 
     //create a new input file element 
     count++; 
     $('.photos').append("<input type =\"file\" class =\"fileup " + count + "\" id =\"file" + count + "\"><label for =\"file" + count + "\" id =\"lbl_upload\"><span class =\"glyphicon glyphicon-plus-sign\"></span></label>"); 
     //show picture in image element 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $(str).attr("src", e.target.result); 
     } 
     reader.readAsDataURL(files); 
     return true; 
    } 
}); 

вот мой CSS

[class*="fileup"]{ 
position:fixed; 
top:5000px; 
} 

Где я пошло не так? Спасибо, что посвятили свое время для решения проблемы.

Answer 1

В настоящее время, что вы используете называется " прямая "привязка, которая будет прикрепляться только к элементу, который существует на странице в момент, когда ваш код вызывает вызов привязки события.

При создании элементов динамически необходимо использовать команду Event Delegation, используя подход делегированных событий. Поскольку вы уже используете общий класс fileup с управлением вводами file. Изменить код как,

$('.photos').on('change', '.fileup', function() { 
    //Your code 
}); 

Answer 2

Это связано с тем, что событие click не связано с динамически добавленным элементом. В этом случае вы должны использовать event delegation.

Событие делегирование позволяет нам присоединить одного прослушивателя событий к родительскому элементу, который будет срабатывать для всех потомков, соответствующих селектору, независимо от того, существуют ли эти потомки или добавлены в будущем.

Кроме того, как идентификаторы генерируются динамически с фиксированным началом с шаблоном, вы можете использовать атрибут начать с выбором при связывании события, используя событие делегации:

$('.photos').on('change','[id^=file]',function(){