無法將事件偵聽器添加到 javascript class 內的按鈕

Question

我想將事件偵聽器附加到所有具有 class“ shop-item-button ”pizzaMenu.js 的按鈕。 我已經嘗試過這樣做，但是即使單擊按鈕，function addToCartClicked()也不會被調用。 此外，在 PizzaMenu.js 中添加事件偵聽器的循環未執行（我嘗試調試）。

整個代碼的鏈接： https://codesandbox.io/s/dazzling-robinson-bsn5g?from-embed=&file=/src/pizzaMenu.js

class pizzaMenu extends Section {
  addToCartClicked(event) {
    console.log("Add to Cart triggered");
    let button = event.target;
    //function definition etc
    }
  }

  constructor(title) {
    super();
  }
  render(app) {
    fetch("data.json")
      .then((response) => {
        console.log("Check 1");
        return response.json();
      })
      .then((data) => {
        data.pizza.forEach((item) => {
          const pizzaMenuEl = this.createSection();

          console.log("Check 2");
          pizzaMenuEl.innerHTML = `
                        <div class="shop-item" id="${item.id}">
                        <div class="shop-item-details">
                            <div class = "shop-item-sizes">
                                <input type="radio" value="100" name="sizes">
                                <label>Small</label>
                                <input type="radio" value="200" name="sizes">
                                <label>Medium</label>
                                <input type="radio" value="300" name="sizes">
                                <label>Large</label>
                            </div>
                            <button class="btn btn-primary shop-item-button">ADD TO CART</button>
                        </div>
                    </div>
                    <br>
                    <br>`;

          app.appendChild(pizzaMenuEl);
          
        });
      });
    //adding the Event Listener to "Add to Cart" buttons
    const btns = document.getElementsByClassName("shop-item-button");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", this.addToCartClicked);
    }
  }
}

節.js

class Section {
  // Classes must be passed as an array
  createSection(cssClasses) {
    const sectionEl = document.createElement("div");
    sectionEl.classList.add("row");

    if (cssClasses) {
      for (const cssClass of cssClasses) {
        sectionEl.classList.add(cssClass);
      }
    }

    return sectionEl;
  }
}

Answer 1

也許只是不要通過所有按鈕 go 而是將事件處理程序設置為父級的單擊事件。

app.addEventListener('click', this.addToCartClicked);

在 addToCartClicked function 中，您可以檢查按鈕元素是否已被單擊並處理它。

if(event.target.classList.contains('shop-item-button')) {
    return;
}

或者

if(event.target.tagName !== 'button') {
    return;
}