JavaScript使用querySelectorAll绑定add-to-cart按钮点击事件不生效

使用querySelectorAll方法选取所有class为.add-to-cart的按钮并绑定点击事件，点击按钮后控制台无对应输出。当前使用laravel-mix构建前端资源，已确认代码可正常编译，但事件始终无法触发。

HTML代码 #

<section class="hero py-16">
  <div class="container mx-auto flex items-center justify-between">
    <div class="w-3/4"> 
      <h6 class="text-lg"> <em> Feeling Hungry? </em></h6>
      <h1 class="text-6xl font-bold">What are you waiting for?</h1>
      <button class="btn-primary px-6 py-2 rounded-full text-white font-bold mt-4">Order Now</button> 
    </div>
    <div class="w-1/2 "><img src="/img/Sloppy_Joes_hero.png" alt=""> </div>
  </div>
</section>
<section class="menu container mx-auto py-8">
  <h1 class="text-xl font-bold mb-8"> All Burgers</h1>
  <div class="grid grid-cols-4 gap-x-12 gap-y-16">
    <% burgers.forEach(function(burger){ %>
      <div class="w-64">
        <img class="h-40 mb-4 mx-auto" src="/img/<%= burger.image %>" alt="item-static">
        <div class="text-center">
          <h2 class="mb-4 text-lg"><%= burger.name %></h2>
          <span class="item-color py-1 px-4 rounded-full uppercase text-xs"> <%= burger.size %></span>
          <div class="flex items-center justify-around mt-6">
            <span class="font-bold text-lg"> ₹<%= burger.price %> </span>
            <button data-burger="<%= JSON.stringify(burger)%>" class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
              <span>+</span>
              <span class="ml-4">Add</span>
            </button>
          </div>
        </div>
      </div>
    <% })%>
  </div>
</section>

JavaScript代码 #

let addToCart = document.querySelectorAll('.add-to-cart');

addToCart.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    let burger = btn.dataset.burger
    console.log(burger)
  })
})

核心原因是JS代码执行时机早于DOM渲染：脚本运行时，.add-to-cart按钮还未被浏览器解析挂载到DOM树上，此时querySelectorAll查询到的是空的NodeList，没有绑定上任何事件。
如果脚本引入位置在<head>标签内，或者写在目标DOM元素的前面，就会出现这个问题。

方案1：等待DOM加载完成后再绑定事件 #

将事件绑定逻辑放到DOMContentLoaded事件回调中执行，确保DOM树完全解析后再查询元素：

document.addEventListener('DOMContentLoaded', () => {
  const addToCart = document.querySelectorAll('.add-to-cart');
  addToCart.forEach((btn) => {
    btn.addEventListener('click', () => {
      console.log(btn.dataset.burger)
    })
  })
})

也可以直接把JS脚本的引入标签放到HTML文档末尾，</body>标签之前，无需额外加加载监听即可保证元素已存在。

方案2：使用事件委托（推荐） #

直接将事件绑定到不会变动的上层父节点（比如document或者菜单容器.menu），利用事件冒泡机制捕获点击，该方案兼容后续动态新增的同类型按钮，无需重复绑定：

document.addEventListener('click', (e) => {
  const btn = e.target.closest('.add-to-cart')
  if (btn) {
    console.log(btn.dataset.burger)
  }
})

如果上述方案修改后仍不触发，按以下顺序排查：

• 打开浏览器开发者工具Elements面板，确认按钮的class名拼写正确，无多余空格或拼写错误
• 在Console面板手动执行document.querySelectorAll('.add-to-cart')，检查返回的NodeList长度是否和页面实际按钮数量一致，长度为0说明DOM查询逻辑仍有问题
• 检查是否存在其他透明元素设置了更高的z-index遮挡按钮，导致点击事件无法落到按钮上，可通过开发者工具选中按钮后查看高亮区域是否和按钮实际位置重合判断

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