javascript - 当元素不是 iset javascript 时添加事件侦听器单击

Question

我有在 AJAX 请求之后添加的按钮，我需要onclick在它们上附加一个事件侦听器，然后才能在 DOM 中创建它们。在 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可以是一个子元素，这是行不通的。

标签： javascript

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>