添加时修改新元素

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

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

用户脚本定位的Web应用程序，在用户执行各种操作时添加新的$('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) { $('' + jNode.text() + '').insertBefore (jNode); } 

Answer 2

你需要使用jquery on（）来动态添加元素