Question

当点击某事时，它会生成一些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")
    }
});

无法单击动态元素

1 个答案: