Всем привет, столкнулся с такой проблемой. Если кнопка прописана в html разметке, то событие клика срабатывает корректно
<body>
<button class="vsfm_control-btn" data-command="close">
<i class="icon-clear"></i>
<span class="vsfm_control-btn-text">Закрыть</span>
</button>
</body>
let toolBtn = document.querySelectorAll('button')
toolBtn.forEach(function(b) {
if (b.disabled) return
b.addEventListener('click', command, false) // в command получаем dataset.command кнопки, все ок
})
но если я эту кнопку генерю в скрипте, и добавляю в DOM вот таким образом
let btn = `
<button class="vsfm_control-btn" data-command="close">
<i class="icon-clear"></i>
<span class="vsfm_control-btn-text">Закрыть</span>
</button>
`
document.body.insertAdjacentHTML('beforeend', btn)
// и слушаю событие клика по ней
let toolBtn = document.querySelectorAll('button')
toolBtn.forEach(function(b) {
if (b.disabled) return
b.addEventListener('click', command, false) // в command получаем dataset.command кнопки, все ок
})
то, если курсор находится на иконке или тексте (которые в тегах i и span соответственно), событие клика не срабатывает, так как курсор не на кнопке, а на дочернем ее элементе. Если кликнуть куда то в уголок кнопки, то все срабатывает. Повторюсь, это случается только если кнопка сгенерирована динамически, по прописанной в html документе кнопке клик отрабатывает нормально. Не знаю, может сумбурно описал, но думаю должно быть понятно))
Заранее спасибо!