Question

因此，我正在尝试在<div>中显示动态“发布”之前添加一个“编辑”按钮。我想在单击时将事件侦听器添加到此“编辑”按钮。但是，仅当我在代码（代码2）的特定位置附加此“编辑”时，即当对HTML的innerHTML不变时，它才能按需工作（onclick起作用，并且在控制台上打印“ edit clicked”）。父按钮<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);

当我更改附加行的位置时，它开始工作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）完全替换了innerHTML中的post_div。它用以前的副本代替它，并在末尾添加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中的内联事件侦听器好得多）。

Javascript onclick事件列表器仅在某些情况下有效

1 个答案: