Jquery .on ('change') не запускает динамически добавленные элементы
Итак, у меня есть страница со следующей структурой
<div class="editCampaignBanner">
<div>
<hr>
<label for="file">Upload a new image</label>
<input id="file" type="file" name="file" class="valid">
<label for="NewImageURLs">Link URL (Optional)</label>
<input id="NewImageURLs" type="text" value="" name="NewImageURLs">
<hr>
</div>
</div>
и я написал несколько jquery таким образом:
$('div.editCampaignBanner input:file').on('change', function () {
var value = $(this).val();
var div = $(this).parent();
var html = '<div>'+ div.html() + '</div>';
if (value.length > 0) {
div.after(html);
}
else if ($(this) > 1) {
div.remove();
}
});
поэтому, когда я ввожу элемент в файл, он генерирует div под предыдущим:
<div class="editCampaignBanner">
<div>
<hr>
<label for="file">Upload a new image</label>
<input id="file" type="file" name="file" class="valid">
<label for="NewImageURLs">Link URL (Optional)</label>
<input id="NewImageURLs" type="text" value="" name="NewImageURLs">
<hr>
</div>
<div>
<hr>
<label for="file">Upload a new image</label>
<input id="file" type="file" name="file" class="valid">
<label for="NewImageURLs">Link URL (Optional)</label>
<input id="NewImageURLs" type="text" value="" name="NewImageURLs">
<hr>
</div>
</div>
Но сейчас, несмотря на то, что событие регистрируется с помощью.on()
второй файл, введенный в div, не запускает событие. Что мне не хватает?