Почему у input не выполняется event change?

Question

[Илья Посаженников]

Создаю input (type=file) и сразу же вещаю на него event change, но функция, которую я на него повесил не выполняется, а в консоли нет сообщений об ошибке.

form.innerHTML += `<input type="file" name="files" id="files" webkitdirectory directory multiple>
    <p>Файлы:</p>
    <div class="card">
        <div class="card-body" id="file-list">
            <p>Тут появятся файлы и замечания к ним</p>
        </div>
    </div>`;
document.getElementById("files").addEventListener("change", event => {
    console.log(1);
});

Comments

[Вадим]

Если не пустую папку выбирать то всё работает

[Михаил]

https://codepen.io/Squall88/pen/ZERaKaK?editors=1111 console.log выводит 1 после выбора директории с файлами.

P.S. При заливке разом директории, браузер спрашивает разрешение на такую операцию, может у вас проблема с этим. Попробуйте для начала просто один файл, чтобы понять в чем причина.

[Илья Посаженников]

Михаил, очень странно, у меня после добавления ивента есть form.innerHTML +=, и если его убрать, всё работает..

[Вадим]

Илья Посаженников, Ну тогда ничего странного.
Если после addEventListener вы снова делаете innerHTML то предыдущий инпут, на который навешан обработчик - умирает и вместо него рендерится новый, без обработчика.

Потому что += Это не добавить к существующему. А взять текущее в виде строки, добавить новое в виде строки и отправить на рендер.

[Илья Посаженников]

Вадим, ого, спасибо!!!!!!!

Answer 1

[Илья Посаженников]

После создания ивента был form.innerHTML += (родитель того инпута), из-за этого ивент «умер».

Источник: https://qna.habr.com/q/1222720#clarification_1622662