无法将事件侦听器添加到 javascript 类中的按钮答案

【问题标题】：Unable to add event listener to a button inside javascript class无法将事件侦听器添加到 javascript 类中的按钮
【发布时间】：2021-04-30 11:50:36
【问题描述】：

我想将事件监听器附加到所有具有“shop-item-button”类的按钮 PizzaMenu.js。我已经尝试过这样做，但是即使我单击按钮，函数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);
    }
  }
}

section.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;
  }
}

【问题讨论】：

标签： javascript oop

【解决方案1】：

也许只是不遍历所有按钮，而是将事件处理程序设置为父级的单击事件。

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

在 addToCartClicked 函数中，您可以检查按钮元素是否已被点击并处理它。

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

或

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

【讨论】：