Question

我有这个功能：

function main() {
    var bottomArea = document.getElementsByClassName("bottom-area");
    for (var i = 0; i < bottomArea.length; i++) {
        var showDialogLink = document.createElement("a");
        showDialogLink.innerHTML = "link";
        showDialogLink.onclick = function(){showSelect(this);return false;};
        bottomArea[i].insertBefore(showDialogLink, bottomArea[i].childNodes[3]);
    }
}

到目前为止，代码工作正常。当我单击新创建的链接时，它会调用showSelect（this）函数。

问题是还有另一个用户脚本/浏览器扩展（我无法访问它 - 它不是我的），它基本上克隆了另一个div，其中'bottom-area'div是嵌套的。这也没关系，但问题是它没有克隆我的函数触发器和那些新克隆的实例（我不确定它们的本质是什么）该链接不再触发showSelect（this）函数。只有我的用户脚本创建的第一个。

我是否有某种方法可以在链接上添加我的功能触发器，即使在克隆/复制后也会保留？

编辑：我只是编辑显示html树：这是开始的：

<div>
<div class="bottom-area"></div>
</div>

我的用户脚本在'a'标记上添加了一个带onclick eventlistener的链接：

<div>
<div class="bottom-area"><a>link</a></div>
</div>

其他用户脚本基本上克隆它（div中有一个textarea，它的值也被克隆），但没有eventlistener，所以单击克隆的链接不再触发我的函数。

EDIT2：如果有帮助，我正在创建的用户脚本是一个reddit用户脚本。我正在添加小功能来评论并在评论文本字段下的“reddiquette”链接旁边添加一个链接。这适用于预生成的文本字段。然而，当我点击评论树中的“回复”时，整个div与文本字段，提交按钮和我的链接被克隆在我正在回复的评论下，但我的链接不再具有自身的功能触发器。

Answer 1

最简单的解决方案可能是简单地使用HTML事件属性（而不是addEventListener），例如<a onclick="dostuff();">link</a>，因为在“克隆”过程中应该保留属性。 See this fiddle（在Firefox 40中测试过）作为示例。

让onclick属性中的代码与您的用户脚本进行交互可能会有点困难because it runs in a different JavaScript environment。幸运的是，有很多可能的解决方法，具体取决于您的确切需求。

用户脚本中的EventListener克隆

1 个答案: