javascript - 将事件监听器添加到动态容器

Question

这个问题已经有答案了:

Attach event to dynamic elements in javascript (14 个回答)

已关闭 6 年前。

我在向页面上尚不存在的元素添加单击事件监听器时遇到问题。请注意我正在执行以下操作JQuery 中的代码相当于文档就绪，因此它是在 DOM 加载后执行的。所以我有一个 div，我将其用作一种按钮

<div id="openContainer"> ... </div>

现在，当单击此 div 时，另一个 div 会动态添加到页面中。这个div只有在上面的点击事件发生时才会被添加。添加的 div 有一个带有身份证搜索。我正在尝试为此添加一个事件监听器。到目前为止我有这个

document.getElementById('openContainer').addEventListener('click', function() {
    document.getElementById('search').addEventListener('click', function() {
        alert("ADDED")
    });
});

但是，当我运行此命令时，我收到一条错误，指出 document.getElementById(...) 为空。我认为这背后的原因是因为在添加实际动态 div 之前添加了事件监听器。事实上，我知道是这种情况，因为它适用于超时，例如

document.getElementById('openContainer').addEventListener('click', function() {
    setTimeout(function () {
       document.getElementById('search').addEventListener('click', function() {
           alert("ADDED")
       });
    }, 2000);
});

有什么方法可以在不超时的情况下执行此操作吗？

谢谢

Answer 1

您可以在现有元素上放置一个事件处理程序，并在 addEventListener() 的匿名函数中检查触发事件的元素的 id:

document.getElementById('openContainer').addEventListener('click', function(event){
  var clicked = event.target;
  if (clicked.id === 'openContainer') {
    // the '#openContainer' element was clicked,
    // ...do stuff
  } else if (clicked.id === 'search') {
    // the '#search' element was clicked,
    // ...do stuff
  }
});