Как можно отловить поля созданные через insertAdjacentHTML?

Question

[Denioo]

Здравствуйте, есть форма на странице в которой есть кнопка добавления нового поля input, и есть кнопка submit.

Скрипт кнопки добавления нового поля внутри формы:

spoiler

const plusCategory = () => {
    const plusCategory = document.querySelector('.main_add_category_plus')
    plusCategory.addEventListener('click', (e) => {
        e.preventDefault()
        plusCategory.insertAdjacentHTML('afterend', `<div>
        <input type="text" class="main_add_category_name" placeholder="Название категории" minlength="2">
        </div>`)
    })
}

Как отловить данные поля созданные с помощью JS в дальнейшем по кнопке submit за границей скрипта добавления поля? Т.е. к примеру:

spoiler

const categoryname = categoryForm.querySelectorAll('.main_add_category_name') //Форма
categoryForm.addEventListener('submit', (e) => {
    e.preventDefault()
    console.log(categoryname)
})

Но отлавливается только поле изначально сгенерированное при загрузке html, а созданные внутри нет.

Answer 1

[Александр Епихин]

categoryForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const categoryname = categoryForm.querySelectorAll('.main_add_category_name');
    console.log(categoryname);
})

Comments

[Denioo]

Блин точно надо создавать константу внутри события, ааа просто мозг уже заплыл от работы