當元素不是 iset javascript 時添加事件偵聽器單擊

Question

我有在 AJAX 請求之后添加的按鈕，我需要在它們在 DOM 中創建之前附加一個onclick事件偵聽器。 在 JQuery 中，我使用了：

$("body").on("click", ".element", func);

在香草js中，我寫道，

document.body.addEventListener("click", function (e) {
  let el = e.target;
  if (el.classList.contains("icon-btn")) {
    el.classList.contains("active")
      ? el.classList.remove("active")
      : el.classList.add("active");
  }
  e.preventDefault();
});

問題是e.target可以是子元素，這是行不通的。

Answer 1

使用.closest()

 document.body.addEventListener('click', function(event) { var element = event.target.closest('.icon-btn'); if (element) { console.log(element); alert('I am the element you are looking for'); } });

 div { border: 2px solid red; padding: 10px; margin: 2px; } div.icon-btn div, div.icon-btn { border-color: green }

 <div> Negative <div> Negative <div class="icon-btn"> Positive <div> Positive <div> Positive </div> </div> </div> <div> Negative <div> Negative <div> Negative </div> </div> <div> Negative </div> </div> </div> </div>