在纯JS中为新添加的元素添加点击事件

Question

我想添加一个点击事件与类item元素。工作好:

const enlargables = document.querySelectorAll('.item');
enlargables.forEach(function(el) {
el.addEventListener('click', function(e) {
alert('hello');
})
});

<div class="item">test 1</div>
<div class="item">test 2</div>

但是如果元素是在页面加载后动态添加的，事件将而不是被添加到元素中。

如何将事件添加到新添加元素类item使用纯JS?类似于jQuery中document ready的工作方式。

Answer 1

这是因为.item元素是动态创建的。换句话说，它是在侦听器被分配之后附加到DOM的。甚至应该使用委托来实现

JavaScript:

document.addEventListener("click", function(e){
const hasClass = event.target.classList.contains('item');
if(hasClass) {
//Add your logic here
}
});

jQuery:

$('body').on('click', '.item', (event) => {
//Add your logic here
});

Answer 2

您可以在最近的静态祖先上使用事件委托。

// document only used for demonstration
document.addEventListener('click', e => {
// use .closest instead to handle clicks on the descendants of .item
if (e.target.matches('.item')) console.log('click');
});
document.querySelector('button').addEventListener('click', function(e) {
const newItem = document.createElement('div');
newItem.classList.add('item');
newItem.textContent = 'test';
this.before(newItem);
});

<div class="item">test 1</div>
<div class="item">test 2</div>
<button>Add</button>