Como detectar a criação de novos elementos no jQuery?

Vamos dizer que eu tenho o seguinte código que retorna o número de elementos âncora em uma página:

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

Se eu ligar no documento pronto, funcionaria como esperado. Mas e se agora um novo link for inserido em uma página dinamicamente por meio de javascript, como posso ser notificado para executar novamente a function de contador de links? (Eu não tenho controle sobre um script que poderia criar um novo link).

Basicamente eu estou procurando algo semelhante ao live() só que estaria assistindo evento de criação de elemento, algo como:

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

que acionaria quando um novo elemento é criado.

Você pode usar o plugin .livequery() para isso, ele é executado para cada elemento, incluindo novos, como este:

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

No entanto, este plugin está desatualizado e não é recomendado para as versões atuais do jQuery.

Geralmente é mais fácil fazer isso quando você cria os elementos, por exemplo, se você estiver fazendo isso após solicitações AJAX, o manipulador .ajaxComplete() pode ser um bom lugar, por exemplo:

 $(document).ajaxComplete(getLinkCount); 

Isso seria executado após cada solicitação e, como você normalmente cria elementos em seu manipulador de success , eles já estarão presentes quando esse manipulador completo for executado.

Você poderia usar o evento DOMSubtreeModified. Por exemplo:

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

Você pode usar a biblioteca arrive.js que desenvolvi exatamente com o mesmo propósito (ela usa o MutationObserver internamente). Uso:

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

A resposta aceita é de 2010 e usa um plugin jQuery que não está mais sendo mantido ativamente. A resposta com o voto mais alto sugere o uso de DOMSubTreeModified que agora está obsoleto e não deve mais ser usado.

Hoje, um MutationObserver é o que você deve usar para detectar quando um elemento foi adicionado ao DOM. Os MutationObservers agora são amplamente suportados em todos os navegadores modernos (Chrome 26+, Firefox 14+, IE11, Edge, Opera 15+, etc).

Aqui está um exemplo simples de como você pode usar um MutationObserver para ouvir quando um elemento é adicionado ao DOM.

Para ser breve, estou usando a syntax do jQuery para criar o nó e inseri-lo no DOM.

 var myElement = $("
hello world
")[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!

O manipulador de events do observer será acionado sempre que qualquer nó for incluído ou removido do document . Dentro do manipulador, executamos uma verificação de myElement para determinar se myElement está agora no document .

Você não precisa fazer uma iteração sobre cada MutationRecord armazenado em mutations porque você pode executar o document.contains diretamente no myElement .

Para melhorar o desempenho, substitua o document pelo elemento específico que conterá myElement no DOM.