使用纯Javascript插入新HTML后添加EventListener

我最近开始用javascript编写一个小型前端项目。我遇到了以下问题：

代码第1部分

const startFeed = document.getElementById('startFeedButton');
const stopFeed = document.getElementById('stopFeedButton');

startFeed.addEventListener("click", () => {
    api.streamingFunction(callback(response){
        appendResponseToDom(response);
    }
}

stopFeed.addEventListener("click", () => {
    endStreamingFunction();
}

“api.streamingFunction”是库的一部分，通过websocket传输数据。每次有新数据可用时，都会重复调用“回调”。它将允许您对回调函数中的数据进行处理。”endStreamingFunction'关闭websocket。 现在，“appendResponseToDom”函数获取一段数据并将其附加到Dom，如下所示：

代码第2部分

const someWhereInDom = document.getElementById('somewhere'); 

function appendResponseToDom(apiData) {
    const newHTML = document.createElement("div");
    newHTML.innerHTML = `
        <div class="data">${apiData}</div>
        <button id=${runningIndex}>Click here</button>
    `
    someWhereInDom.appendChild(newHTML);
}

const someWhereInDom=document.getElementById（'somewhere'）；
函数AppendResponseDom（apiData）{
const newHTML=document.createElement（“div”）；
newHTML.innerHTML=`
${apiData}
点击这里
`
someWhereInDom.appendChild（newHTML）；
}

每个按钮都有一个运行索引来唯一地选择它。我没有在上面的代码中指定如何计算runningIndex

我现在想做的是：

• 在将新HTML插入Dom后（通过添加事件监听器）（可选地通过websocket并行传输新数据），唯一地选择每个按钮

---

这可能吗？我通常怎么做？也许你可以给我指出正确的方向，谢谢。

通过观察Dom的变化来解决这个问题。请参见此处：

这篇文章也很有帮助：

解决方案代码

const mutationObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
    if(mutation.target.nodeName === "BUTTON") {
      mutation.target.addEventListener("click", () => {
        console.log("clicked " + mutation.target.className); //Now, I can do sth with it! 
      })
    }
  });
});

mutationObserver.observe(someWhereInDom, {
  attributes: true,
  childList: true
});

---

它们是否都具有相同的父元素？如果是->如果使用jQuery，有一种非常简单的方法可以一次性将侦听器添加到所有元素，即使它们是在加载之后添加的。也许这里的答案会有所帮助：试过了，但似乎不起作用。我认为问题在某种程度上在于api函数。我们将进一步详细介绍，谢谢