jQuery watch div

Existe alguma maneira de assistir, se o conteúdo dentro de um div muda?

Vamos dizer que eu tenho:

Some content here

Que em algum momento 5 segundos depois muda para:

 
  • This is totally different!

Como posso ser notificado disso por meio de um retorno de chamada ou outra coisa? Eu posso na maioria dos casos obter o javascript que está fazendo a inserção, para me dizer. Mas eu queria saber se era possível.

O método jQuery .change () funciona apenas para campos de formulário.

Eu escrevi um pequeno plugin jQuery para você:

      

Testing it: (click on divs to change contents)

Hi
Ho
He
He
He

Esteja ciente de que isso observa apenas alterações no conteúdo do elemento (html), não nos atributos.

Não há nenhum evento nativo jQuery / DOM que seja triggersdo quando o conteúdo HTML / DOM for alterado.

Você poderia (se você está se sentindo particularmente esbanjador) fazer algo assim:

 $(function() { var $div = $("#hello"); var html = $div.html(); var checking = setInterval(function() { var newhtml = $div.html(); if (html != newhtml) { myCallback(); html = newhtml; } },100); function myCallback() { alert('content changed!'); // if you only want it to fire once, uncomment the following: // clearInterval(checking); } }); 

Lembre-se de que chamar o .html() cada 100 ms provavelmente não é a melhor ideia para o desempenho de seus sites.

jsFiddle mockup

Talvez seja razoável monitorar a origem dos events que alteram o conteúdo da (s) sua (s) camada (s)? Digamos, um usuário clicou em qualquer lugar (leia, “fez um clique”) após o que o conteúdo pode ter mudado. Portanto, se você verificar o .html () após um clique, em vez de usar um loop, ele poderá salvar alguns resources do sistema.

Quem / o que vai mudar isso? Se for algum JS que você controla, use também para acionar seu retorno de chamada. Obviamente, um usuário não pode mudar isso.

Se você quiser assistir a um elemento etc, use o evento ‘change’. Versão jQuery aqui: http://api.jquery.com/change/

Aqui está um exemplo de código que chama um alerta simples quando o valor fornecido é alterado:

 < !DOCTYPE html>   watchu, watchu, watchu want, watchu want?   
Hello World!

Existem alguns events chamados DOMNodeInserted , DOMNodeRemoved e DOMSubtreeModified . Qual é a verificação de que quaisquer elementos foram adicionados ou removidos ou qualquer Html interno foi alterado dentro de uma div. para isso você precisa de uma function setInterval() .

  function DivChange() { $('#YourDiv').bind('DOMNodeInserted DOMNodeRemoved', function (event) { if (event.type == 'DOMNodeInserted') { alert('Content added'); } else if (event.type == 'DOMNodeRemoved') { alert('Content removed'); } else { alert('Inner Html changed for some content'); } }); } var DivTimer = setInterval(DivChange, 1000); 

As funções acima irão verificar o Div para qualquer alteração de conteúdo, para cada segundo

Nota: Esses events não são suportados pelo IE