时间戳

首页 > 解决方案 > 元素内任何 div 的 querySelectorAll

javascript - 元素内任何 div 的 querySelectorAll

问题描述

我希望这会为我在部分 id 内单击的任何 div 弹出警报playGrid，但它什么也不做。

<div id="playGrid" class="w">
  <section>
    <div id="0_0"></div>
    <div id="0_1"></div>
    <div id="0_2"></div>
    <div id="0_3"></div>

    <div id="1_0"></div>
    <div id="1_1"></div>
    <div id="1_2"></div>
    <div id="1_3"></div>

    <div id="2_0"></div>
    <div id="2_1"></div>
    <div id="2_2"></div>
    <div id="2_3"></div>

    <div id="3_0"></div>
    <div id="3_1"></div>
    <div id="3_2"></div>
    <div id="3_3"></div>
  </section>
</div>

JavaScript

document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el){
  el.addEventListener('click', function() {
    alert(this.id);
  });
});

标签： javascripthtmlqueryselectall

解决方案

我认为问题在于您的代码在文档完全加载之前运行。要在页面加载后运行您的代码，请为“DOMContentLoaded”事件添加事件侦听器：

document.addEventListener('DOMContentLoaded', function(){
  document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el) {
    el.addEventListener('click', function() {
      alert(this.id);
    });
  });
});

https://codepen.io/mikhailsidorov/pen/BaoPKoX

推荐阅读