Как в Greasemonkey / javascript можно обрабатывать новые элементы, добавленные на страницу?

Question

Я написал скрипт Greasemonkey, который управляет содержимым определенных элементов с помощью следующего селектора:

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

Однако иногда соответствующие элементы добавляются на страницу через AJAX, и я не знаю, как обрабатывать эти новые элементы. Я пробовал это, но это не работает:

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

Документация для jQuery live () говорит, что она хочет событие (например, "щелчок"). Но у меня нет событий, я просто хочу знать, когда что-то, совпадающее с моим селектором, было создано, и затем я хочу изменить его.

Справочная информация : я столкнулся с этой проблемой при использовании скрипта Greasemonkey для отображения относительных временных отметок StackOverflow в качестве абсолютных локальных временных отметок, которые вы можете найти в meta-SO . Проблема в том, что когда вы нажимаете «показать все комментарии», новые комментарии добавляются AJAX, и я не знаю, как найти и заменить метки времени в этих сценариях.

Answer 1

Одна вещь, которую вы можете попробовать (хотя я не уверен, что это сработает), это кэшировать ваш выбор в какой-то глобальной переменной, например:

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

Тогда у вас будет функция .each:

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

После того, как ваши новые элементы были добавлены в DOM, вы можете повторно выбрать append для вашего кэшированного объекта:

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

(P.s. .html() предназначен для настройки HTML. Чтобы установить текст, используйте .text()

Answer 2

С установкой StackOverflow я нахожу раздражающей работу с вещами после комментариев. Я сделал привязку к кнопке «Добавить / удалить комментарии», которая использует setTimeout, чтобы дождаться создания элементов, а затем изменить их.