Question

--------------------------------------------更新：10分钟以后------------------------------------------------- ---

在评论之后，我认为有必要提供更多contxt信息，说明该问题方法的调用位置。

//fetch fake user info from RandomAPI
fetch('https://randomuser.me/api/?results=12&nat=us') //pull 12 results
    //parse json
    .then(response => response.json()) 
    //process employee data and return a new employee list
    .then(data => extractEmployeeData(data.results)) 
    //for every employee in the list, generate dom element and bind it to employee object
    .then(employees => employees.map((employee, index) => employee.generateEmployeeCard(main, index)))
    .catch(error => console.log(error));

话虽如此...我真的不知道该bug是否与异步调用有关...也许您有经验的人会找到任何线索...

-------------------------------------------------- ----原帖-------------------------------------------- ------------------

我有一堂课

class Employee {
  this.card;
  this.info = { some employee info... }

  ......

  // generates employee card and binds handler to the dom object generated
  generateEmployeeCard(containerDiv, index) {
      const html = ` some markup... `
      containerDiv.innerHTML += html;
      this.card = document.getElementById(`employee${index}`);

      //THE PROBLEM LINE
      this.card.addEventListener('click', event => this.generateEmployeeModal());
  }

  .......
}

一切正常，直到generateEmployeeCard()方法的最后一行为止。这行代码应该将事件侦听器添加到dom元素对象“ this.card”中。但是相反，此行选择在执行时不执行任何操作。在执行此行之后，我查看了“事件监听器”选项卡。这看起来真的很奇怪，我在这里找不到任何类似的问题。请帮忙，谢谢！

Answer 1

您应该将事件处理程序直接分配给该函数：

this.card.addEventListener("click", this.generateEmployeeModal);

addEventListener（）无法执行

1 个答案: