無法使點擊事件在 javascript 上工作

Question

我正在嘗試使用 querySelectorAll 函數選擇具有“.add-to-cart”類的所有按鈕，但我無法在控制台中生成 MouseEvent。

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)
  })
})

我正在使用 laravel-mix 並且我確實檢查了文件是否正在編譯，它們是但我無法看到事件發生。 非常感謝你。

Answer 1

我發現了我忘記在 html 文件中添加腳本標簽的問題。 感謝所有試圖提供幫助的人。