Почему скрипт не срабатывает при изменении сгенерированных элементов?

Question

[Hey_Hey]

Всем привет! Есть вот такой скрипт, который, по идее, должен вызываться при каждом изменении элементов с тегом "z"(в моем случае это file input), но скрипт реагирует только на изменение тех полей, которые были созданы не пользователем, а с загрузкой страницы.

function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
            
                reader.onload = function (e) {
          
                    $(input).next().attr('src', e.target.result);
                }
            
                reader.readAsDataURL(input.files[0]);
            }
        }
    
        $(".z").change(function(){
            readURL(this);
        });

Answer 1

[Владимир Проскурин]

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

$(".parent-block").on('change', '.z', function(){
            readURL(this);
        });

Comments

[Hey_Hey]

Спасибо)

Answer 2

[Владимир]

Почитай про разницу между event binding и event delegation
Ну и вот на закуску
api.jquery.com/on

Answer 3

[Павел]

Потому что на элементы созданные уже после загрузки страницы не вешаются ваши ивенты, которые вы цепляете по document ready. После создания элемента на него нужно вешать ивент (change, click и пр.).