Подскажите почему не работает?

542
29 декабря 2016, 09:28

Mне нужно, чтобы можно было добавлять несколько файлов на страницу, и код, в общем, работает. Но тот блок, который динамически создаётся, он уже не работает.

$('.block-file input[type="file"]').change(function(){
  $(this).prev().addClass("del");
  $(this).prev().removeClass("add");
  $(this).prev().find("span").text($(this).val());
  $(this).prev().attr('onclick', '$(this).parent().remove();')
  $(this).parent().parent().append('<div class="block-file"><a class="add" onclick="$(this).next().click();"><i class="fa fa-plus-circle"></i><span>Вы можете добавить фото</span></a><input type="file" style="visibility:hidden;width: 0;"></div>');
});

HTML

<div class="block-file">
  <a class="add" onclick="$(this).next().click();"><i class="fa fa-plus-circle"></i><span>Вы можете добавить фото</span></a>
  <input type="file" style="visibility:hidden;width: 0;">
</div>
Answer 1

Потому что DOM модель уже вгружена в браузер, вы не можете изменять динамически вновь созданные объекты (они попросту не загружены). Для решения проблемы вам надо использовать

$('body').on('change', '.block-file input[type="file"]', function(){
   //... весь код тут
 });

Подробнее http://api.jquery.com/on/

Answer 2

Вместо

$('.block-file input[type="file"]').change(function(){

используйте

$(document).on("change", '.block-file input[type="file"]', function(){
READ ALSO
Imprort of modules in typescript doesn&#39;t work [требует правки]

Imprort of modules in typescript doesn't work [требует правки]

I have 2 typescript files, first appts file input point and the second mobiles

526
Что могло случиться с wedbriverio?

Что могло случиться с wedbriverio?

Пытаюсь запустить тесты на Jasmine через chimpjs, но прохождение тестов фейлится с ошибкой:

546
Как узнать где лежит js который вызывает обновление?

Как узнать где лежит js который вызывает обновление?

Если после загрузки страницы происходит аякс-обновление данных, как узнать где лежит js который вызывает обновление

476
Gracemonkey/Tampermonkey. Как использовать div id для отображения его в блоке

Gracemonkey/Tampermonkey. Как использовать div id для отображения его в блоке

Есть множество конструкций на сайте типа:

536