Eu tenho uma div que tem seu conteúdo mudando o tempo todo, seja ajax requests
, jquery functions
, blur
etc etc.
Existe uma maneira de detectar alterações na minha div a qualquer momento?
Eu não quero usar nenhum intervalo ou valor padrão verificado.
Algo assim faria
$('mydiv').contentchanged() {
alert('changed')
}
keypress
evento a um<div>
elemento editável por conteúdo . Não tenho certeza de que as soluções se aplicam a isso. Definitivamente, eles não captariam nenhuma mudança programática no conteúdo de um elemento.Respostas:
Se você não quiser usar o timer e verificar o innerHTML, tente este evento
Mais detalhes e dados de suporte do navegador estão aqui .
Atenção: nas versões mais recentes do jQuery, bind () está obsoleto, portanto, você deve usar on ():
fonte
$("body").on('DOMSubtreeModified', "mydiv", function() { });
Usando Javascript MutationObserver
fonte
Como
$("#selector").bind()
está obsoleto , você deve usar:fonte
#
para indicar que o símbolo deve ir antes do seletor.Você pode tentar isso
mas isso pode não funcionar no Internet Explorer, não foi testado
fonte
clearTimeout(window.something); window.something = setTimeout(...);
Você está procurando MutationObserver ou Mutation Events . Nem são suportados em todos os lugares nem são encarados com muito carinho pelo mundo do desenvolvedor.
Se você sabe (e pode ter certeza de que) o tamanho da div será alterado, poderá usar o evento de redimensionamento do navegador cruzado .
fonte
O código a seguir funciona para mim.
Espero que ajude alguém :)
fonte
Não há solução embutida para esse problema, este é um problema com seu padrão de design e codificação.
Você pode usar o padrão de editor / assinante. Para isso, você pode usar eventos personalizados do jQuery ou seu próprio mecanismo de eventos.
Primeiro,
Agora você pode assinar os eventos divhtmlchanging / divhtmlchanged da seguinte maneira,
Agora, você deve alterar as alterações no seu conteúdo div através desta
changeHtml()
função. Portanto, você pode monitorar ou fazer as alterações necessárias adequadamente, porque o argumento de ligação de dados de retorno de chamada que contém as informações.Você precisa alterar o html da sua div assim;
E também, você pode usar isso para qualquer elemento html, exceto o elemento de entrada. De qualquer forma, você pode modificar isso para usar com qualquer elemento (s).
fonte
Use MutationObserver como visto neste snippet fornecido pela Mozilla e adaptado desta postagem do blog
Como alternativa, você pode usar o exemplo JQuery visto neste link
Chrome 18+, Firefox 14+, IE 11+, Safari 6+
fonte
Você pode armazenar o innerHTML antigo da div em uma variável. Defina um intervalo para verificar se o conteúdo antigo corresponde ao conteúdo atual. Quando isso não for verdade, faça alguma coisa.
fonte
Experimente o MutationObserver:
suporte ao navegador: http://caniuse.com/#feat=mutationobserver
fonte
A adição de algum conteúdo a uma div, seja através do jQuery ou diretamente da API do DOM, é padronizada para a
.appendChild()
função O que você pode fazer é substituir a.appendChild()
função do objeto atual e implementar um observador nele. Agora, substituindo nossa.appendChild()
função, precisamos emprestar essa função de outro objeto para poder acrescentar o conteúdo. Por isso, chamamos o.appendChild()
de uma outra div para finalmente anexar o conteúdo. Claro, isso também vale para o.removeChild()
.Aqui você pode encontrar um exemplo ingênuo. Você pode estendê-lo sozinho, eu acho. http://jsfiddle.net/RKLmA/31/
A propósito: isso mostra que o JavaScript está em conformidade com o princípio do OpenClosed. :)
fonte