Как определить создание нового элемента в jQuery?

Допустим, у меня есть следующий код, который возвращает количество элементов привязки на странице:

function getLinkCount() {
    alert("Links:" + $("a").length);
}

Если я закрою готовый документ, он будет работать так, как ожидалось. Но что, если теперь новая ссылка будет вставлена в страницу динамически через javascript, как я могу получить уведомление, чтобы снова запустить функцию счетчика ссылок? (Я не могу контролировать script, который мог бы создать новую ссылку).

В основном я ищу что-то похожее на live() только для просмотра события создания элемента, например:

$("a").live("create", getLinkCount);

который будет срабатывать при создании нового элемента.

Ответ 1

Вы можете использовать .livequery() плагин для этого, он запускается для каждого элемента, включая новые, например:

$("a").livequery(getLinkCount);

Однако этот плагин устарел и не рекомендуется для текущих версий jQuery.

Как правило, это проще сделать при создании элементов, например, если вы делаете это после запросов AJAX, обработчик .ajaxComplete() может быть хорошим местом, например:

$(document).ajaxComplete(getLinkCount);

Это будет выполняться после каждого запроса, и поскольку вы обычно создаете элементы в своем обработчике success, они уже будут присутствовать при запуске этого полного обработчика.

Ответ 2

Вы можете использовать событие DOMSubtreeModified. Например:

$(document).bind('DOMSubtreeModified',function(){
  console.log("now there are " + $('a').length + " links on this page.");
})

Ответ 3

Вы можете использовать библиотеку arrival.js, которую я разработал для той же цели (она использует MutationObserver внутренне). Использование:

document.arrive('a', function(){
    // 'this' refers to the newly created element
    var newElem = this;
});