javascript - 无法点击动态元素

Question

当点击something 时，它会生成一些 div(我在下面称之为视频)。但是，我无法让我的点击事件监听器工作——很可能是因为视频/div 是动态添加的。

奇怪的是，如果我在 forEach 中进行控制台操作，所有元素都会显示出来。所以我知道他们在那里。我也没有收到任何控制台错误。

function openVideoPopup() {
  videos = [].slice.call(document.getElementsByClassName('tv-video-and-copy'));

  videos.forEach(function(video) {
    video.addEventListener('click', function(event) {
      alert('Test');
    });
  });
}

视频/div 是从 PHP 脚本创建的:

$videos .= '
   <div data-id=' . $data['id'] . ' class="tv-video-and-copy dw-30 tw-45 mw-100' . $filter . '">
       <div class="tv-video-cont">
         <div class="tv-video">
             <img class="video-thumb" data-video="' . $data['youtube_src'] . '" data-src="../img/secret-tv/tv-' . $data['id'] . '.jpg">
         </div>
       </div>
      <p class="title">' . htmlspecialchars($data['title']) . '</p>
      <p>' . htmlspecialchars($data['description']) . '</p>
   </div>';

如果需要任何进一步的代码或解释，请告诉我! :)

Answer 1

要为动态添加的元素添加事件处理程序，您可以在 document 上添加事件监听器，然后对其进行过滤以仅对相关元素触发，例如

document.addEventListener('click', function(event) {
      if(event.target.classList.indexOf('tv-video-and-copy') > -1){
           alert("clicked")
    }
});