javascript - 用addEventListener添加一个元素并在下一次迭代中获取它

Question

这个问题已经有答案了:

Addeventlistener dynamically to newly added classes (1 个回答)

已关闭 5 年前。

我在所有具有“card-title”类的html元素上添加了一个事件监听器，该监听器用于创建具有“card-title”类的相同html元素，但是创建的这些新元素不响应addEventListener当我点击它们时。我猜这是因为它们没有添加到数组cardTitles中，我不知道该怎么做

function myFunc() {
  var cardTitles = document.getElementsByClassName('card--title');

  for (var i = 0; i < cardTitles.length; i++) {
    cardTitles[i].addEventListener('click', function() {
      var newCard = document.createElement('p');
      newCard.className = 'card--title';
      newCard.innerText = 'Enter';
      document.body.appendChild(newCard);
    });
  }
}

myFunc();

Answer 1

I guess it's because they are not added to the array cardTitles and I don't know how to do it

实际上，它们是(如果浏览器本身支持 getElementsByClassName，而不是 polyfilled)；它返回一个实时 HTMLCollection。

但是，没有发生的是，您没有将事件监听器挂接到这些新元素上。您的循环仅运行一次，处理然后中的元素，当您添加元素时它不会重新运行。

你有两个选择:

1. 在添加元素时将处理程序添加到每个新元素，或者

2. 在所有这些内容所在的容器上使用single处理程序，并使用event.target来确定点击了哪一个，因为点击会冒泡；这称为事件委托(delegate)

这是#1 的一个简单示例:

function myFunc() {
  function handler() {
    var newCard = document.createElement('p');
    newCard.className = 'card--title';
    newCard.innerText = 'Enter';
    newCard.addEventListener('click', handler);
    document.body.appendChild(newCard);
  }

  var cardTitles = document.getElementsByClassName('card--title');

  for (var i = 0; i < cardTitles.length; i++) {
    cardTitles[i].addEventListener('click', handler);
  }
}

myFunc();

这是#2 的一个简单示例:

function myFunc() {
  var container = document.querySelector("selector-for-the-container");
  // For your use case, you probably can just use `document.body` instead
  // of `container`, since you're appending new card titles to `document.body`

  container.addEventListener('click', function(event) {
    var cardTitle = event.target.closest(".card--title");
    if (cardTitle && this.contains(cardTitle)) {
      var newCard = document.createElement('p');
      newCard.className = 'card--title';
      newCard.innerText = 'Enter';
      document.body.appendChild(newCard);
    }
  });
}

myFunc();

使用 Element#closest ，如果您需要支持任何版本的 IE，则必须对其进行填充；请参阅链接了解详细信息。

另请注意，如果您想处理所有 .card--title 元素，即使它们位于您 Hook 事件的容器的祖先。我将其包含在内是为了完整性，但考虑到您要将新内容附加到 document.body，在此特定用例中您不需要它。