Javascript addEventListener不适用于特定元素

时间:2017-12-09 10:17:47

标签: javascript addeventlistener

我遇到了一个奇怪的问题:我使用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");

结果: Event listeners issue

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

我知道有一些解决方法(就像我通过在脚本末尾添加事件监听器所展示的那样),但我真的很好奇并且很想知道造成这个问题的原因。谢谢!

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

1 个答案:

答案 0 :(得分:2)

我从小提示中读到您将primaryProductNameLink追加到primaryProductInfoDiv,之后您使用primaryProductInfoDiv修改primaryProductInfoDiv.innerHTML +=

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

否则

 primaryProductInfoDiv.innerHTML += '<br>';

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

因此,我们可以使用createElementappendChild来避免这种问题,而不是连接。