添加新元素时修改它们

Question

这是由我的用户脚本在页面加载时完成的：

$('a.people').each(function (index, value) {
     $('<i>'+$(value).text()+'</i>').insertBefore(value);
});

用户脚本所针对的网络应用程序，在用户执行各种操作时添加新的$('a.people') 元素。

如何为新添加的元素运行我的代码？将新元素添加到 DOM 时是否会触发事件？

我不想使用setInterval，因为代码在不需要时会循环并影响性能。

Answer 1

如果您想在目标页面添加新元素时对其进行操作，您有两种选择：

• MutationObserver
  或
• 轮询

（请注意，旧的 Mutation 事件已被弃用，并且与突变观察者不同。）

此外，您需要跟踪哪些节点已完成，并避免重复修改它们。有一个实用程序：waitForKeyElements。它使用轮询并处理所有开销。您不会注意到页面速度变慢。

完整的用户脚本，适用于 Greasemonkey 或 Tampermonkey，使用 waitForKeyElements 替换您的问题代码：

// ==UserScript==
// @name     _Italicize People entries
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements ("a.people", italicizePeople);

function italicizePeople (jNode) {
    $('<i>' + jNode.text() + '</i>').insertBefore (jNode);
}

Answer 2

动态添加元素需要使用jquery on()