0

我有这个功能：

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 的 div。这也没关系，但问题是它不会克隆我的函数触发器，并且该链接的那些新克隆的实例（我不确定它们的性质是什么）不再触发 showSelect(this) 函数。只有我的用户脚本创建的第一个可以。

有什么方法可以在我的链接上添加我的函数触发器，即使在克隆/复制之后也会保留？

编辑：我将编辑以显示 html 树：这是在开头：

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

我的用户脚本在“a”标签上添加了一个带有 onclick 事件监听器的链接：

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

另一个用户脚本基本上克隆了它（div 中有一个 textarea，它的值也被克隆了），但是没有事件监听器，所以单击克隆的链接不再触发我的函数。

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

4

1 回答 1

0

最简单的解决方案可能是简单地使用 HTML 事件属性（而不是addEventListener），例如<a onclick="dostuff();">link</a>，因为在“克隆”期间应该保留该属性。有关示例，请参见此小提琴（在 Firefox 40 中测试）。

让 onclick 属性中的代码与您的用户脚本交互可能有点困难，因为它在不同的 JavaScript 环境中运行。幸运的是，有很多可能的解决方法，具体取决于您的确切需求。

于 2015-08-25T12:55:50.390 回答