How to hang an event on an element that appears in the DOM later?

没办法。你应该改变应用程序的逻辑。你可以在父级上监听 onClick 事件。然后选择元素以选择你需要的新元素。

您可以使用 事件委托 来实现这一点。基本上，您向 document 添加一个事件侦听器。在处理程序方法中，您检查事件 target 是否有区别属性。如果 target 包含该属性，则执行某些操作，如果不包含，则什么也不会发生。这样，就可以处理稍后添加的元素。

// add a listener to document
document.addEventListener("click", showClick);

// ad a new element to the DOM
const newElement = document.createElement("div");
newElement.innerHTML = "I am new! Click me!";
newElement.id = "new";
newElement.style.cursor = "pointer";
document.body.appendChild(newElement);

// this handles all clicks
function showClick(evt) {
  // if it's div#new, do something
  if (evt.target.id === "new") {
    console.log("there we are!");
  }
  // otherwise nothing happens
}

<div id="notnew">I exist after page load. Try clicking me, I dare you!</div>