Javascript 将事件侦听器添加到动态容器

我在向页面上尚未显示的元素添加单击事件侦听器时遇到问题。请注意，我正在执行以下操作 JQuery equavilant中的代码已准备好文档，因此它是在加载DOM后执行的。所以我有一个div，我用它作为一种按钮

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

但是，当我运行此命令时，我得到一个错误，document.getElementById（…）为null。我认为这背后的原因是因为事件侦听器是在添加实际的动态div之前添加的。事实上，我知道是这样的，因为它在超时情况下工作

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

我有没有办法不超时就完成这项工作

---

谢谢

您可以在现有元素上放置单个事件处理程序，并在

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
  }
});

---

一个可能的原因是JavaScript在DOM元素创建之前就已经运行了

---

确保脚本标记位于标记之后

唯一的问题是，它仍然显示错误，因为搜索元素还没有出现。你能显示足够的代码，让我们重现你的问题吗？发布的方法不应产生任何错误，因为如果id为

“search”

的元素不存在，它将不会输入

，否则如果需要它的分支。
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
  }
});