Javascript addEventListener 不适用于特定元素

Question

我遇到了一个奇怪的问题：我使用 Javasript 创建了 8 个不同的 HTML 元素（每个元素的方式几乎完全相同）并向它们添加事件侦听器，但是 1 个特定元素没有添加事件侦听器。

这是运行良好的元素之一的代码：

var primaryProductImageLink = document.createElement("a");
primaryProductImageLink.setAttribute("id", "primaryProductImageLink");
primaryProductImageLink.setAttribute("href", result.primaryProduct.pageLink);
primaryProductImageLink.setAttribute("data-resultRequestID", getResultResponse.resultRequestID);
primaryProductImageLink.setAttribute("data-linkName", "primaryProduct");
primaryProductImageLink.addEventListener("click", clickedLinkInResultSection);

这里是没有应用任何事件监听器的元素的代码：

var primaryProductNameLink = document.createElement("a");
primaryProductNameLink.setAttribute("id", "primaryProductNameLink");
primaryProductNameLink.setAttribute("href", result.primaryProduct.pageLink);
primaryProductNameLink.setAttribute("data-resultRequestID", getResultResponse.resultRequestID);
primaryProductNameLink.setAttribute("data-linkName", "primaryProduct");
primaryProductNameLink.addEventListener("click", clickedLinkInResultSection);

当我清除缓存、上传更改并查看页面时，我运行以下命令并确认事件侦听器已添加到第一个元素而不是第二个元素：

getEventListeners(document.getElementById("primaryProductImageLink"));
{点击：数组(1)}
getEventListeners(document.getElementById("primaryProductNameLink"));
{}

但是，如果我将以下代码添加到 Javascript 的最后，事件侦听器将成功添加到 primaryProductNameLink 元素：

document.getElementById("primaryProductNameLink").addEventListener("click", clickedLinkInResultSection);

验证：

getEventListeners(document.getElementById("primaryProductNameLink"));
{点击：数组（1）}

我已尝试向此元素添加不同的事件侦听器，但均未奏效。我也添加了测试属性，它们显示得很好。测试代码：

var primaryProductNameLink = document.createElement("a");
primaryProductNameLink.setAttribute("id", "primaryProductNameLink");
primaryProductNameLink.setAttribute("href", result.primaryProduct.pageLink);
primaryProductNameLink.setAttribute("data-resultRequestID", getResultResponse.resultRequestID);
primaryProductNameLink.setAttribute("data-linkName", "primaryProduct");
primaryProductNameLink.addEventListener("mouseover", function() { console.log("test"); });
primaryProductNameLink.addEventListener("mouseout", function() { console.log("test"); });
primaryProductNameLink.addEventListener("click", clickedLinkInResultSection);
primaryProductNameLink.setAttribute("data-test", "test");

结果： .

我已经浏览了整个 Javascript 文件，并且没有其他对“primaryProductNameLink”的引用可能会删除任何事件侦听器。

我知道有一些解决方法（比如我通过在脚本末尾添加事件侦听器来展示的解决方法），但我真的很好奇并且很想知道是什么导致了这个问题。谢谢！

编辑：完整的 Javascript 可以在这里找到：https://jsfiddle.net/fbchm4ov/（我的帖子中描述的元素只有在回答了 4 个问题后才会生成。）

Answer 1

从我读到的小提琴中，您将primaryProductNameLink 附加到primaryProductInfoDiv，之后您使用primaryProductInfoDiv.innerHTML += 修改primaryProductInfoDiv。

当您设置innerHTML 属性时，您将覆盖在那里设置的现有 HTML。

在做

 primaryProductInfoDiv.innerHTML += '<br>';

基本上是使用当前的innerHTML 结构加上<br> 创建一个新的HTML 结构并将其分配给innerHTML。您的事件处理程序附加到旧的 innerHTML，而不是新的。

因此，我们可以使用createElement 和appendChild 来避免这种问题，而不是进行串联。