Question

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

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

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

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

然而，当我运行它时，我得到一个错误，即document.getElementById（...）为null。我认为这背后的原因是因为事件监听器是在添加实际动态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
  }
});

Answer 2

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

确保您的脚本标记位于代码之后。

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

2 个答案: