addEventListener 不适用于从 javascript 添加的新类选择的元素

Question

我试图让按钮在单击评级时起作用。否则我不会让按钮 addEventListener 工作

我确实使用 console.log 检查了所有元素是否正确循环。我没有发现我的代码有任何错误

代码

"use strict";

const btn = document.querySelector(".btn");
const activeBtn = document.querySelector(".btn--active");
const cardFront = document.querySelector(".card__side--front");
const cardBack = document.querySelector(".card__side--back");
const ratingNum = document.querySelectorAll(".card__rating-num");

ratingNum.forEach((rating) => {
  rating.addEventListener("click", () => {
    btn.classList.add("btn--active");
  });
});

activeBtn.addEventListener("click", () => {
  cardFront.style.transform = "rotateY(-180deg)";
  cardBack.style.transform = "rotateY(0)";
});

<div class="card__footer">
  <div class="card__rating u-mbm">
    <span class="card__rating-num">1</span>
    <span class="card__rating-num">2</span>
    <span class="card__rating-num">3</span>
    <span class="card__rating-num">4</span>
    <span class="card__rating-num">5</span>
  </div>
  <a href="#" class="btn">Submit</a>
</div>

Answer 1

您试图在按钮激活之前通过单击评级数字之一来获得

activeBtn

。由于还没有活动按钮，因此

activeBtn

为空，您无法向其添加事件侦听器。

相反，将事件监听器添加到

btn

，它可以检查它是否处于活动状态。

"use strict";

const btn = document.querySelector(".btn");
const activeBtn = document.querySelector(".btn--active");
const cardFront = document.querySelector(".card__side--front");
const cardBack = document.querySelector(".card__side--back");
const ratingNum = document.querySelectorAll(".card__rating-num");

ratingNum.forEach((rating) => {
  rating.addEventListener("click", () => {
    btn.classList.add("btn--active");
  });
});

btn.addEventListener("click", (e) => {
  if (e.target.classList.contains("btn--active")) {
    console.log("Clicked on submit");
  }
});

.btn {
  color: grey;
}

.btn.btn--active {
  color: black;
}

<div class="card__footer">
  <div class="card__rating u-mbm">
    <span class="card__rating-num">1</span>
    <span class="card__rating-num">2</span>
    <span class="card__rating-num">3</span>
    <span class="card__rating-num">4</span>
    <span class="card__rating-num">5</span>
  </div>
  <a href="#" class="btn">Submit</a>
</div>