我遇到了一个奇怪的问题:我使用 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"));
{click: Array(1)}
getEventListeners(document.getElementById("primaryProductNameLink"));
{}
但是,如果我将以下代码添加到 Javascript 的最后,事件监听器将成功添加到 PrimaryProductNameLink 元素:
document.getElementById("primaryProductNameLink").addEventListener("click", clickedLinkInResultSection);
验证:
getEventListeners(document.getElementById("primaryProductNameLink"));
{click: Array(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 个问题后才会生成。)
最佳答案
从 fiddle 中我读到您附加 primaryProductNameLink
至primaryProductInfoDiv
然后修改 primaryProductInfoDiv
通过使用primaryProductInfoDiv.innerHTML +=
.
当您设置innerHTML
时属性,您将覆盖那里设置的现有 HTML。
正在做
primaryProductInfoDiv.innerHTML += '<br>';
基本上是使用当前的innerHTML结构加上<br>
创建一个新的HTML结构。并将其分配给innerHTML。您的事件处理程序附加到旧的innerHTML,而不是新的。
因此,我们可以使用 createElement
而不是进行串联和appendChild
以避免此类问题。
关于Javascript addEventListener 不适用于特定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47727529/