Detectar alterações de conteúdo de elemento com jQuery

change() A função funciona e detecta alterações nos elementos do formulário, mas há uma maneira de detectar quando o conteúdo de um elemento DOM foi alterado?

Isso não funciona, a menos que #contentseja um elemento de formulário

$("#content").change( function(){
    // do something
});

Eu quero que isso seja acionado ao fazer algo como:

$("#content").html('something');

Além disso, html()ou a append()função não tem um retorno de chamada.

Alguma sugestão?

Esses são eventos de mutação .

Não usei APIs de eventos de mutação no jQuery, mas uma pesquisa rápida me levou a este projeto no GitHub. Desconheço a maturidade do projeto.

Sei que esta postagem tem um ano, mas gostaria de fornecer uma abordagem de solução diferente para aqueles que têm um problema semelhante:

1. O evento de mudança do jQuery é usado apenas em campos de entrada do usuário porque se algo mais for manipulado (por exemplo, um div), essa manipulação virá do código. Portanto, descubra onde ocorre a manipulação e, em seguida, adicione o que for necessário.

2. Mas se isso não for possível por algum motivo (você está usando um plugin complicado ou não consegue encontrar nenhuma possibilidade de "retorno de chamada"), então a abordagem jQuery que eu sugiro é:

   uma. Para manipulação DOM simples, use o encadeamento e travessia jQuery,$("#content").html('something').end().find(whatever)....

   b. Se você gostaria de fazer outra coisa, use jQuery's bindcom eventos personalizados etriggerHandler

   $("#content").html('something').triggerHandler('customAction');
   
   $('#content').unbind().bind('customAction', function(event, data) {
      //Custom-action
   });

Aqui está um link para o manipulador de gatilho jQuery: http://api.jquery.com/triggerHandler/

O navegador não disparará o evento onchange para os <div>elementos.

Acho que o raciocínio por trás disso é que esses elementos não mudarão a menos que modificados por javascript. Se você já tiver que modificar o elemento por conta própria (em vez de o usuário fazê-lo), poderá simplesmente chamar o código de acompanhamento apropriado ao mesmo tempo que modifica o elemento, assim:

 $("#content").html('something').each(function() { });

Você também pode disparar manualmente um evento como este:

 $("#content").html('something').change();

Se nenhuma dessas soluções funcionar para sua situação, você poderia fornecer mais informações sobre o que você está especificamente tentando realizar?

e http://jsbin.com/esepal/2

$(document).bind("DOMSubtreeModified",function(){
  console.log($('body').width() + ' x '+$('body').height());
})

Este evento foi descontinuado em favor da API Mutation Observer

Tente vincular ao DOMSubtreeModifiedevento seeign, pois o teste também faz parte do DOM.

veja este post aqui no SO:

como-faço-para-monitorar-o-dom-para-mudanças

Experimente, foi criado por James Padolsey (JP aqui no SO) e faz exatamente o que você quer (eu acho)

http://james.padolsey.com/javascript/monitoring-dom-properties/

E com HTML5 temos observadores de mutação DOM nativos .

Não é estritamente uma resposta jQuery - mas é útil mencionar para depuração.

No Firebug, você pode clicar com o botão direito em um elemento na árvore DOM e configurar 'Break on Attribute Change':

Quando um atributo é alterado em um script, a janela de depuração aparece e você pode rastrear o que está acontecendo. Também há uma opção para inserção e remoção de elemento abaixo (obscurecido de forma inútil pelo pop-up na captura de tela).

Estou desenvolvendo uma pequena biblioteca JS chamada mutabor ( https://github.com/eskat0n/mutabor ), que visa simplificar o uso de eventos de mutação DOM. Veja demo.html para exemplos.

Experimente o plugin livequery. Isso parece funcionar para algo semelhante que estou fazendo.

http://docs.jquery.com/Plugins/livequery

Freqüentemente, uma maneira simples e eficaz de fazer isso é controlar quando e onde você está modificando o DOM.

Você pode fazer isso criando uma função central que é sempre responsável por modificar o DOM. Em seguida, você faz qualquer limpeza necessária no elemento modificado de dentro desta função.

Em um aplicativo recente, não precisei de ação imediata, então usei um retorno de chamada para a função load () portátil, para adicionar uma classe a quaisquer elementos modificados e, em seguida, atualizei todos os elementos modificados a cada poucos segundos com um temporizador setInterval.

$($location).load("my URL", "", $location.addClass("dommodified"));

Então você pode lidar com isso como quiser - por exemplo

setInterval("handlemodifiedstuff();", 3000); 
function handlemodifiedstuff()
{
    $(".dommodified").each(function(){/* Do stuff with $(this) */});
}

Você pode adicionar uma opção de retorno de chamada à função html (ou qualquer):

$.fn.oldHtml = $.fn.html;
$.fn.html = function(html,fn){
  fn = fn || function(){};
  var result =  this.oldHtml(html);
  fn();
  return result;
};
$('body').html(11,function(){alert("haha");});

Demonstração aqui.

Você faz a mudança em algum elemento, e não o elemento é forçado a mudar por algo que você precisa capturar.

Eu escrevi um snippet que verificará a alteração de um elemento em um evento.

Portanto, se você estiver usando um código javascript de terceiros ou algo assim e precisar saber quando algo aparece ou muda quando você clica, você pode.

Para o snippet abaixo, digamos que você precise saber quando o conteúdo de uma tabela muda depois que você clica em um botão.

$('.button').live('click', function() {

            var tableHtml = $('#table > tbody').html();
            var timeout = window.setInterval(function(){

                if (tableHtml != $('#table > tbody').
                    console.log('no change');
                } else {
                    console.log('table changed!');
                    clearInterval(timeout);
                }

            }, 10);
        });

Pseudo-código:

• Depois de clicar em um botão
• o html do elemento que você espera alterar é capturado
• então verificamos continuamente o html do elemento
• quando descobrimos que o html é diferente, paramos a verificação

Podemos fazer isso usando eventos de mutação . De acordo com www.w3.org, o módulo de evento de mutação é projetado para permitir a notificação de qualquer alteração na estrutura de um documento, incluindo modificações de atributo e de texto. Para mais detalhes EVENTOS DE MUTAÇÃO

Por exemplo :

$("body").on('DOMSubtreeModified', "#content", function() {
    alert('Content Modified'); // do something
});

Não é possível, eu acredito que tenha um evento de conteúdo alterado, mas certamente não é o x-browser

Devo dizer que não é possível sem algum intervalo desagradável roncando no fundo!