javascript - 为什么我的事件侦听器无法处理最初隐藏的元素？

Question

为了清楚起见， .drop-down-selection 通过我的 javascript 呈现到我的 html 中。所以这门课从一开始就在那里。

我的 HTML：

  <div class="padding-me">
        <div id='thirty_days_top_chart' ></div>
         <div id='overall_chart' ></div>
    </div>


     <div class="padding-me">
        <div id="total_chart"></div>
        <div id="total_30_days_chart"></div>
    </div>

我的 JS：

var selection;
const selectElements = document.querySelectorAll(".drop-down-selection");
selectElements.forEach((el) =>
  el.addEventListener("change", (event) => {
    // const result = document.querySelector('.result');
    // result.textContent = `You like ${event.target.value}`;

    console.log(`You like ${event.target.value}`);
    selection = event.target.value;

    if (event.target.value == "all-time") {
      document.getElementById("overall_chart").style.display = "block"
      document.getElementById("total_chart").style.display = "block"

      document.getElementById("thirty_days_top_chart").style.display = "none"
      document.getElementById("total_30_days_chart").style.display = "none"
      
    }
    if (event.target.value == "past-thirty-days") {
        document.getElementById("thirty_days_top_chart").style.display = "block"
        document.getElementById("total_30_days_chart").style.display = "block"
        
        document.getElementById("overall_chart").style.display = "none"
        document.getElementById("total_chart").style.display = "none"
      }
  })
);

我的CSS：

#overall_chart{
  display: none;
}

#total_chart{
  display: none;
}

我正在尝试将事件侦听器添加到具有下拉菜单的一系列图形中。当用户改变他们的选择时，应该显示新的图表。这些图表都有一个带有事件侦听器的下拉菜单，如果我最初不隐藏图表，这个事件侦听器可以正常工作。如果我隐藏了一个图然后再渲染它，事件监听器将不会被添加到它。

我不明白为什么没有将事件侦听器添加到最初隐藏的图形中。

如果您进入图表并选择刷新总数选项，将呈现一个新图表。这个新图没有与之关联的事件侦听器。

标签： javascripthtmlcss