javascript - addEventListener 不适用于 ajax 生成的内容(纯 javascript)

Question

我在“测试”中通过 ajax(纯 javascript)动态加载带有 div 的内容。现在，当我单击索引 6 的子 div 时，我希望出现一个警告框，但事实并非如此。

如何使点击事件起作用？如果 ajax 请求已完成，则调用 Gets。它工作正常如果我删除事件监听器并添加一个警报框，显示适当的内容。使用事件监听器，它完全无法将处理程序绑定(bind)到目标 div。

function gets(){
    document.getElementById("test").children[6].addEventListener("click", function() {
        alert(document.getElementById("test").children[6])
    })
}

Answer 1

这个问题可以通过事件委托(delegate)来解决。

这是如何工作的一个例子:

function gets() {
  document.getElementById("test").addEventListener("click", function(event) {
    console.log(event.currentTarget.children[0])

  })

currentTarget 指的是我们主动点击的元素，target 是父元素。