在 Greasemonkey/javascript 中，如何处理添加到页面的新元素？答案

【问题标题】：In Greasemonkey/javascript, how can I handle new elements added to page?在 Greasemonkey/javascript 中，如何处理添加到页面的新元素？
【发布时间】：2009-08-10 17:11:27
【问题描述】：

我编写了一个 Greasemonkey 脚本，它使用以下选择器操作某些元素的内容：

$("span.relativetime").each(function() { $(this).html("TEST"); });

但是，有时通过 AJAX 将匹配的元素添加到页面中，我不知道如何处理这些新元素。这个我试过了，还是不行：

$("span.relativetime").live(function() { $(this).html("TEST"); });

documentation for jQuery live() 表示它想要一个事件（例如“点击”）。但是我没有任何事件，我只想知道何时创建了与我的选择器匹配的东西，然后我想对其进行修改。

背景：我在使用 Greasemonkey 脚本将 StackOverflow 的相对时间戳显示为绝对本地时间戳时遇到了这个问题，you can find on meta-SO。问题是当你点击“显示所有 cmets”时，新的 cmets 是由 AJAX 添加的，我不知道如何在这些脚本中查找和替换时间戳。

【问题讨论】：

标签： javascript jquery ajax dom greasemonkey

【解决方案1】：

使用 StackOverflow 的设置，我发现在 cmets 之后处理东西很烦人。我所做的是在 Add/Remove cmets 按钮上绑定，该按钮使用 setTimeout 等待创建元素，然后修改它们。

【讨论】：

不管您在哪个网站上，是否没有通用的方法可以做到这一点？这似乎是相当频繁地需要的东西。
StackOverflow '创建' cmets。我没有看到很多网站这样做。他们大多只是“展示”他们。相反，SO 通过 AJAX 获取它们

【解决方案2】：

您可以尝试的一件事（尽管我不确定它是否可行）是将您的选择缓存在一些全局变量中，如下所示：

var $relativetime = $("span.relativetime");

然后你就会有你的 .each 函数：

$relativetime.each(function() { $(this).html("TEST"); });

将新元素添加到 DOM 后，您可以重新选择附加到缓存对象：

$relativetime.append("<my html>"); //or
$("<my html>").appendto($relativetime);

(P.s. .html() 用于设置html。要设置文本，请使用.text()

【讨论】：