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

Question

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

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

$(document).ajaxComplete(getLinkCount);

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

Answer 3

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

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

Answer 4

Принятый ответ от 2010 года и использует плагин jQuery, который больше не поддерживается. Ответ с наибольшим количеством голосов предлагает использовать DOMSubTreeModified, который теперь устарел и больше не должен использоваться.

Сегодня MutationObserver - это то, что вы должны использовать для обнаружения, когда элемент был добавлен в DOM. MutationObservers теперь широко поддерживаются во всех современных браузерах (Chrome 26+, Firefox 14+, IE11, Edge, Opera 15+ и т. Д.).

Вот простой пример того, как вы можете использовать MutationObserver для прослушивания, когда элемент добавляется в DOM.

Для краткости я использую синтаксис jQuery для построения узла и вставки его в DOM.

var myElement = $("<div>hello world</div>")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.log: It's in the DOM!

Обработчик события observer сработает всякий раз, когда какой-либо узел добавляется или удаляется из document. Внутри обработчика мы затем выполняем проверку contains, чтобы определить, находится ли myElement в document.

Вам не нужно перебирать каждый MutationRecord, хранящийся в mutations, потому что вы можете выполнить проверку document.contains непосредственно на myElement.

Чтобы повысить производительность, замените document конкретным элементом, который будет содержать myElement в DOM.