将EventListener添加到新创建的DOM元素中

Question

您好，我目前正在制作一个仅用于练习的小型项目，但我遇到了这个问题。循环适用于硬编码的代码，但不适用于动态键入的一个

<button class='agree'>Add Like</button>

然后我有一个功能，基本上可以增加喜欢的人数。

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

function plusAgree (e) {
      let newNum =  Number(this.children[1].innerText) + 1;
      this.children[1].innerText = newNum;
}

此代码对于硬编码的按钮元素很好用。但是，当我将其应用于刚刚使用createElement和innerHTML（动态键入）创建的新元素时，事件侦听器将不再起作用。

    let newDiv = document.createElement('div');
    newDiv.className = 'boxshadow post-div grid-x';
    newDiv.innerHTML = `
    <div class="cell small-10">
          <h3 id='post-title'>${postContent.title}</h3>
          <p id='post-description'>${postContent.description}</p>
        </div>
        <div class="cell small-2 icon-div" id="icon-div">
          <button class='agree' id=${agreeId()}>
            <i class="fas fa-thumbs-up fa-3x"></i>
            <h5 class='agree-num'></h5>
          </button>

我如何更改此类型，以便动态键入的引用按钮而不是全局对象？谢谢

![ Here is the result for hardcoded ] 1

![This is what i got from the newly created element ] 2

Answer 1

[this引用全局对象，因为该函数在全局范围内被调用。