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

我遇到的问题是将单击事件侦听器添加到页面上尚未存在的元素。只需注意我在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（...）为空。我认为这背后的原因是因为在添加实际的动态div之前添加了事件监听器。事实上，我知道这是事实，因为它可以在超时等情况下工作。

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

有没有什么办法可以在没有超时的情况下做到这一点？

感谢

来源

2017-02-14 kate_hudson

您可以将现有元素上一个单一的事件处理程序，并在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 
    } 
});

来源

2017-02-14 13:43:55

唯一的问题是，它仍然显示错误，因为搜索元素还没有出现 –

你能够显示足够的代码，我们可以重现你的问题吗？发布的方法不应该产生任何错误，因为如果id为“search”的元素不存在，它将不会进入需要它的else if分支。 –

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

确保您的脚本标签位于标签之后。

来源

2017-02-14 13:46:53 DeeJay

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

回答

相关问题