Estou tentando descobrir como executar algum código js quando um elemento é removido da página:
jQuery('#some-element').remove(); // remove some element from the page
/* need to figure out how to independently detect the above happened */
existe um evento feito para isso, algo como:
jQuery('#some-element').onremoval( function() {
// do post-mortem stuff here
});
obrigado.
Respostas:
Apenas verificado, ele já está embutido na versão atual do JQuery:
jQuery - v1.9.1
UI do jQuery - v1.10.2
Importante : Essa é a funcionalidade do script da interface do usuário do Jquery (não do JQuery), portanto, você deve carregar os dois scripts (jquery e jquery-ui) para fazê-lo funcionar. Aqui está um exemplo: http://jsfiddle.net/72RTz/
fonte
remove
o elemento, ele dispara, mas se o elemento for destruído de alguma outra maneira, sendo sobrescrito, digamos, não funcionará.Você pode usar eventos especiais do jQuery para isso.
Com toda a simplicidade,
Configuração:
Uso:
Adendo para responder aos comentários de Pierre e DesignerGuy:
Para não ativar o retorno de chamada durante a chamada
$('.thing').off('destroyed')
, altere a condição if para:if (o.handler && o.type !== 'destroyed') { ... }
fonte
o.handler()
parao.handler.apply(this,arguments)
o evento e os objetos de dados não passarem pelo ouvinte de evento.$('.thing').unbind('destroyed')
o que poderia realmente ser irritante (desde meios UNBIND não queremos que o manipulador a ser chamado ...)Você pode vincular ao evento DOMNodeRemoved (parte da especificação WC3 do nível 3 do DOM).
Funciona no IE9, versões mais recentes do Firefox e Chrome.
Exemplo:
Você também pode receber uma notificação quando elementos são inseridos vinculando-os a
DOMNodeInserted
fonte
e.target.className
ouif ($(e.target).hasClass('my-class')) { ...
.Não há evento interno para remover elementos, mas você pode criar um usando o método de remoção padrão do jQuery de extensão falsa. Observe que o retorno de chamada deve ser chamado antes de removê-lo para manter a referência.
Nota: alguns problemas com esta resposta foram descritos por outros pôsteres.
html()
replace()
ou outros métodos jQueryA solução mais elegante para esse problema parece ser: https://stackoverflow.com/a/10172676/216941
fonte
$('#some-element').bind('remove', function(ev) { if (ev.target === this) { console.log('removed!'); } });
Hooking
.remove()
não é a melhor maneira de lidar com isso, pois há muitas maneiras para remover elementos da página (por exemplo, usando.html()
,.replace()
, etc).Para evitar vários riscos de vazamento de memória, o jQuery internamente tentará chamar a função
jQuery.cleanData()
para cada elemento removido, independentemente do método usado para removê-lo.Consulte esta resposta para obter mais detalhes: vazamentos de memória javascript
Portanto, para obter melhores resultados, você deve conectar a
cleanData
função, que é exatamente o que o plugin jquery.event.destroyed faz:http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js
fonte
cleanData
foi muito útil para mim! Muito obrigado, Joe :)Para quem usa jQuery UI:
jQuery UI tem substituído alguns dos métodos do jQuery para implementar um
remove
evento que será tratado não só quando você remover explicitamente o elemento dado, mas também se o elemento é removido do DOM por quaisquer métodos jQuery auto-limpeza (por exemploreplace
,html
, etc.) . Isso basicamente permite que você coloque um gancho nos mesmos eventos que são acionados quando o jQuery está "limpando" os eventos e dados associados a um elemento DOM.John Resig indicou que está aberto à ideia de implementar este evento em uma versão futura do núcleo do jQuery, mas não tenho certeza de onde ele está atualmente.
fonte
Somente o jQuery é necessário (nenhuma interface do usuário do jQuery é necessária)
( Eu extraí esta extensão da estrutura da interface do usuário do jQuery )
Funciona com:
empty()
ehtml()
eremove()
Com esta solução, você também pode desvincular o manipulador de eventos.
Tente! - Exemplo
Demonstração Adicional - jsBin
fonte
Não consegui que esta resposta funcionasse com a desobstrução (apesar da atualização, veja aqui ), mas consegui descobrir uma maneira de contorná-la. A resposta foi criar um evento especial 'destroy_proxy' que acionou um evento 'destruído'. Você coloca o ouvinte de evento em 'destroyed_proxy' e 'destroyed', e quando você deseja desvincular, basta desassociar o evento 'destroyed':
Aqui está um violino
fonte
Eu gosto da resposta do mtkopone usando eventos especiais do jQuery, mas observe que ele não funciona a) quando elementos são desanexados em vez de removidos ou b) quando algumas bibliotecas antigas não-jquery usam innerHTML para destruir seus elementos
fonte
detach
é usado especialmente para não acionar a limpeza, pois provavelmente o elemento está planejado para ser anexado mais tarde. b) ainda é verdadeiro e ainda não possui tratamento confiável, pelo menos desde que os eventos de mutação do DOM sejam amplamente implementados.Não tenho certeza de que exista um identificador de evento para isso, então você teria que manter uma cópia do DOM e comparar com o DOM existente em algum tipo de loop de pesquisa - o que poderia ser bastante desagradável. O Firebug faz isso - se você inspeciona o HTML e executa algumas alterações no DOM, destaca as alterações em amarelo no console do Firebug por um curto período de tempo.
Como alternativa, você pode criar uma função de remoção ...
fonte
Isto é como criar um ouvinte de remoção ao vivo do jQuery :
Ou:
fonte
O evento "remove" do jQuery funciona bem, sem adição. Pode ser mais confiável na hora de usar um truque simples, em vez de aplicar o patch do jQuery.
Basta modificar ou adicionar um atributo no elemento que você está prestes a remover do DOM. Assim, você pode acionar qualquer função de atualização, que apenas ignorará os elementos a serem destruídos, com o atributo "do_not_count_it".
Suponha que tenhamos uma tabela com células correspondentes aos preços e que você precise mostrar apenas o último preço: este é o seletor a ser acionado quando uma célula de preço for excluída (temos um botão em cada linha da tabela, não mostrado aqui)
E aqui está uma função que encontra o último preço na tabela, sem levar em conta o último, se foi o que foi removido. De fato, quando o evento "remover" é acionado e quando essa função é chamada, o elemento ainda não foi removido.
No final, a função update_prices () funciona bem e, depois disso, o elemento DOM é removido.
fonte
referenciando a resposta @ David:
Quando você deseja fazer isso com outra função, por exemplo. html () como no meu caso, não se esqueça de adicionar retorno na nova função:
fonte
Este.
fonte
uma extensão da resposta de Adam, caso você precise prever o padrão, aqui está uma solução alternativa:
fonte
Também podemos usar DOMNodeRemoved:
fonte