Javascript onclick 事件监听器有时只工作

Question

因此，我试图在<div>中显示动态“发布”之前添加一个“编辑”按钮。 单击时，我想将事件侦听器添加到此“编辑”按钮。 但是，只有当我在我的代码（code-2）中的某个 position 处进行 append 这个“编辑”时，它才会按预期工作（onclick 工作并且“编辑点击”打印在控制台上），即当没有更改 innerHTML 时parent <div>在附加此按钮之后，但这不是 UI 所要求的方式。

当它不工作时，CODE-1（这是我想在 UI 中“编辑”的地方）

let post_div = document.createElement('div');
let edit = document.createElement('div');
edit.style.color = 'blue';
edit.innerHTML = 'Edit';
post_div.append(edit);
let htmlsegment2 = `
    <div id="post-data">${post.post_data}</div>
    <div style="color: grey;">${post.timestamp}</div>`;
post_div.innerHTML += htmlsegment2;
edit.onclick = function(){
    console.log("edit clicked");
}
post_div.className = 'all-posts';
document.querySelector('#all-posts').append(post_div);

当我更改附加行的 position 时，它开始工作 CODE-2

let post_div = document.createElement('div');
let edit = document.createElement('div');
edit.style.color = 'blue';
edit.innerHTML = 'Edit';
let htmlsegment2 = `
      <div id="post-data">${post.post_data}</div>
      <div style="color: grey;">${post.timestamp}</div>`;
post_div.innerHTML += htmlsegment2;
 edit.onclick = function(){
      console.log("edit clicked");
}   
post_div.append(edit);
post_div.className = 'all-posts';
document.querySelector('#all-posts').append(post_div);

Answer 1

关键区别在于这两个语句的顺序，这在两个示例中是不同的：

1:

post_div.append(edit);

2：

post_div.innerHTML += htmlsegment2;

在第一个（非工作）片段中，1) 首先发生，然后是 2)。 这里的问题是 2) 完全替换了post_div的innerHTML 。 它用之前的副本替换它，并在末尾添加htmlsegment2的内容。 它只是以下内容的简写：

post_div.innerHTML = post_div.innerHTML + htmlsegment2;

并希望以这种形式看到它可以更清楚地了解整个innerHTML被丢弃然后被替换。 尽管结果仍将包含相同的 HTML 内容，但重要的是它不会保留您称为edit作为post_div的子元素的 DOM 元素的存在。 这意味着当您稍后设置edit.onclick时，您正在设置一个实际上不在 DOM中的元素的属性 - 因此实际上没有发生任何值得注意的事情。

在第二个片段中，2) 首先发生，这意味着edit附加到post_div并且此后不会被替换 - 因此任何edit操作都适用于实际 DOM 中的元素。

希望这两个片段之间的区别是有意义的。 我想说的是，您的代码有一些问题 - 将 HTML 的字符串直接分配给innerHTML属性不是很容易维护，并且将+=运算符与innerHTML一起使用有一些常见的问题，您的问题就是一个例子（而且效率也很低）。 使用addEventListener方法onclick属性要好得多（尽管两者都比 HTML 中的内联事件侦听器好得多，无可否认）。