После динамичного добавления блока не получается повесить на него событие

Question

У меня есть два input где я ввожу url и alt картинки. Потом через JS создаю блок div, записываю в тег img значения двух input и вывожу на страницу. Потом хочу повесить событие на динамически созданный div, но у меня выходит ошибка, что событие null (логично, ведь его не существует). Я могу конечно заранее создать пустой блок в html и туда динамически добавлять img, но стало интересно как-то можно обойти этот момент?

<body>
    <form action="" class="form-addImage" name="addImage">
        <input class="form-input form-input-mainUrl" name="mainUrl" type="text" placeholder="url картинки"/>
        <input class="form-input form-input-altText" name="altText" type="text" placeholder="альтернативное описание картинки"/>
        <button class="form-button form-add-button" name="formAddBtn" type="button">Add image</button>
        <button class="form-button form-delete-button" name="formDeleteBtn" type="button">Delete image</button>
    </form>
    
    <script src="js/index.js"></script>
</body>

let form = document.forms.addImage
let mainUrl = form.mainUrl
let altText = form.altText

let addButton = form.formAddBtn
addButton.addEventListener('click', (e) => {
    if (mainUrl.value != '') {
        const div = document.createElement('div')
        div.classList.add('image-wrapper')

        const img = document.createElement('img')
        img.src = mainUrl.value
        img.alt = altText.value
        div.append(img)

        //div.innerHTML = `<img src="${mainUrl.value}" alt="${altText.value}">`

        document.body.append(div)
        mainUrl.value = ''
        altText.value = ''
    }
})

let deleteButton = form.formDeleteBtn
deleteButton.addEventListener('click', (e) => {
    const imageWrapper = document.querySelector('.image-wrapper')
    if (imageWrapper != null) {
        imageWrapper.remove()
    }
})

let imageWrapper = document.querySelector('.image-wrapper')
imageWrapper.addEventListener('click', (e) => {
    if (altText.value === '') {
        imageWrapper.style.border = '1px solid red'
    }
})

Answer 1

Так вешайте событие сразу после создания div

let addButton = form.formAddBtn
addButton.addEventListener('click', (e) => {
    if (mainUrl.value != '') {
        const div = document.createElement('div')
        div.classList.add('image-wrapper')

        const img = document.createElement('img')
        img.src = mainUrl.value
        img.alt = altText.value
        div.append(img)

        //div.innerHTML = `<img src="${mainUrl.value}" alt="${altText.value}">`

        document.body.append(div)
        mainUrl.value = ''
        altText.value = ''

        let imageWrapper = div
        imageWrapper.addEventListener('click', (e) => {
            if (altText.value === '') {
                imageWrapper.style.border = '1px solid red'
            }
        })
    }
})

БЛОГ НА HUSL

После динамичного добавления блока не получается повесить на него событие

Ответы (1 шт):