Динамическое создание тега на JS, почему не сработает обработчик событий?

Question

[danshu]

let input = document.getElementById('input')
let btn = document.getElementById('btn')
let total = document.getElementById('total')
let ol = document.getElementById('ol')


btn.addEventListener('click', function () {
    const li = document.createElement('li')
    li.className = 'li'
    li.textContent = input.value
    if (input.value != ''){
        ol.appendChild(li)
        input.value = ''
        total.textContent ++
    }
    

    li.addEventListener('click', function() {
        li.classList.add('li_click')
if ( total.textContent != 0){
        total.textContent--
}})

})

При нажатии на новый созданный элемент li должен применяться стиль, зачеркивающий его. Объясните пожалуйста, почему почему обработчик события для li нужно обязательно записывать внутри функции обработчика события для btn? Ведь мы создаем новый li при клике на btn, и он попадает в DOM

Answer 1

[Алексей Уколов]

Ведь мы создаем новый li при клике на btn, и он попадает в DOM

Ну да, попадает. А чтобы что-то с ним делать, нужно навесить обработчик события. Совершенно непонятно, что вас в этом процессе удивляет.
Вы можете делегировать обработку события родительскому контейнеру (<ol />) и тогда навешивать отдельные обработчики на создаваемые элементы не придётся.

Comments

[danshu]

Просто, изначально я повесил обработчик на li вне обработчика на btn, тогда стили не применялись, вот и возник вопрос, почему не сработал первый вариант

[Алексей Уколов]

Вне обработчика btn, то есть до создания элемента li, невозможно повесить на него обработчик. Обработчик добавляется только какому-то существующему в DOM в данный конкретный момент элементу.

[danshu]

Алексей Уколов, Спасибо за ответ, теперь понял