Почему jquery не видит элемент?

Question

[Hey_Hey]

Есть такой скрипт, который по нажатию кнопки создает тег img и вставляет туда картинку, но при попытке смены изображения ничего не происходит, пожалуйста, подскажите в чем проблема.

<script>
    function readURL(input) {//создание миниатюрных картинок


        document.getElementById("done").setAttribute('disabled', 'disabled');

        if (input.files && input.files[0]) {
            var reader = new FileReader();



            reader.onload = function (e) {
               
              
                if (!($(input).closest('.defectdiv').hasClass("filled"))) {
                    var img = createImg();
                    img.setAttribute('src', e.target.result);
                    $(input).closest('.defectdiv').append(img);
                    img.style.height = "90%";
                    $(input).closest('.defectdiv').addClass("filled") //добавление аутенфикационного класса
                    //$(input).next().attr('src', e.target.result);
                    $('img[src*="#"]').remove();
                } else {
                    $(input).closest('.classforimg').attr('src', e.target.result);
                }
               

              
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".z").change(function () {
        readURL(this);
    });


</script>

function createImg() {//создание шаблонных img


        var img = document.createElement('img');
        img.id = "blah";
        img.src = "#";
        img.alt = "Фотография не выбрана";
        img.classList.add('photo', 'img-rounded','classforimg');
       // img.style.height = "90%";
        return img;

    }

Answer 1

[Сергей Попов]

Jquery обрабатывает элементы только на моменте инициализации. Все то, что появляется после - проблема для него. Он это не заметит. Именно поэтому JS (а jquery - одна из библиотек на JS), подключают после всех файлов и ставят на обработку после события DOMContentLoaded ($(document).ready()).
При динамическом создании картинки он просто ее не видит. Потому что при инициализации скрипта ее нет. Вот и все.

P.S. Поэтому при работе JQuery и любого современного фреймворка для SPA случаются затыки и необходимо цепляться на метод updated / mounted, чтобы поймать элементы после инициализации в DOM-дереве.

Answer 2

[lloydbanks]

Делегирование событий