Handlebars循环生成的按钮无法绑定点击事件怎么解决？

问题根源 #

1. 重复ID违反HTML规范：循环生成的按钮共用同一个id="get-history"，浏览器要求ID必须唯一，document.querySelector("#get-history")只会返回第一个匹配的按钮，后续按钮根本没绑定事件。
2. 换类后仍用querySelector无效：如果换成类但还是用querySelector，同样只会选中第一个元素，没给所有按钮绑定事件。

修正步骤 + 解决方案 #

第一步：修正HTML模板（移除重复ID）

把按钮的ID换成类，同时注意循环里的div id="moment-dots"也是重复ID，必须改成类：

<div class="timeline-wrapper">
      <ul class="timeline">
        {{#each moments as |moment| }}
        <li data-date="{{moment.date}}">
          <span class="title">{{moment.title}}</span>
          <div class="moment-dots data show"> <!-- 替换重复ID为类 -->
            <h3 class="description">{{moment.description}}</h3>
            <small class="date"> {{moment.date}}</small>
            <p class="^details">
              {{moment.details}}
            </p>

     <button class="get-history-btn">What else happened on this day ?</button> <!-- 替换ID为类 -->

          </div>
        </li>
        {{/each}}

方案一：遍历所有按钮绑定事件

通过querySelectorAll获取所有按钮，逐个绑定点击事件：

// 获取所有带目标类的按钮
const historyButtons = document.querySelectorAll(".get-history-btn");

// 遍历每个按钮绑定事件
historyButtons.forEach(button => {
  button.addEventListener("click", function() {
    console.log("clicked");
    // 如需获取当前按钮对应的日期，可从父级li的data-date属性取
    const targetDate = this.closest("li").dataset.date;
    console.log("对应日期：", targetDate);
  });
});

方案二：事件委托（推荐）

利用事件冒泡，给父容器绑定一次事件即可处理所有按钮的点击，即使后续动态生成按钮也能生效：

// 选择最接近的稳定父容器（这里用timeline这个ul）
const timelineContainer = document.querySelector(".timeline");

timelineContainer.addEventListener("click", function(event) {
  // 判断点击的元素是否是目标按钮
  if (event.target.matches(".get-history-btn")) {
    console.log("clicked");
    // 获取对应日期
    const targetDate = event.target.closest("li").dataset.date;
    console.log("对应日期：", targetDate);
  }
});

为什么事件委托更优 #

• 无需遍历所有元素绑定事件，性能更好；
• 支持后续动态添加的按钮（比如通过AJAX加载新的moment后，新按钮无需重新绑定事件）；
• 减少内存占用，避免大量重复的事件监听。

内容的提问来源于stack exchange，提问作者Allan Elias