Question

我最近开始使用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);
}

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

我现在要做的是：

在将newHTML插入Dom之后（通过添加事件侦听器）（并且可选地通过websocket并行传输新数据）选择每个按钮

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

Answer 1

通过观察Dom的变化来解决它。见这里：MutationObserver。

这篇文章也很有帮助：Detect, Undo And Redo DOM Changes With Mutation Observers

解决方案代码

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
});

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

1 个答案: