Nota do autor (pie6k). Eu criei esta biblioteca há alguns anos e era legal naquela época. Agora você provavelmente não deveria usar jQuery para coisas assim e usar React ou algo semelhante. Obrigado. — 21/11/2018
Relatórios de bugs ainda são aceitos.
O plugin jQuery.initialize
foi criado para ajudar a manter os elementos criados dinamicamente na página.
jQuery.initialize irá iterar sobre cada elemento que corresponde ao seletor e aplicar a função de retorno de chamada. Em seguida, ele escutará quaisquer alterações no Modelo de Objeto do Documento e aplicará a função de retorno de chamada a quaisquer novos elementos inseridos no documento que correspondam ao seletor original.
$.initialize([selector], [callback]);
Isso permite que os desenvolvedores definam um retorno de chamada de inicialização que será aplicado sempre que um novo elemento correspondente ao seletor for inserido no DOM. Funciona também para elementos carregados via AJAX.
Demonstração simples - clique aqui
$.initialize(".some-element", function() {
$(this).css("color", "blue");
});
Mas agora, se um novo elemento correspondente ao seletor .some-element
aparecer na página, ele será inicializado instantaneamente. A forma como o novo item é adicionado não é importante, você não precisa se preocupar com retornos de chamada, etc.
$("<div/>").addClass("some-element").appendTo("body"); //new element will have blue color!
Para interromper a observação do documento, você pode desconectar o observador chamando disconnect()
na instância MutationObserver
retornada, o que o impede de receber notificações adicionais até e a menos que observe()
seja chamado novamente. . Por exemplo,
var obs = $.initialize([selector], [callback]); // Returns MutationObserver
obs.disconnect();
target
Por padrão, todo o documento é observado quanto a alterações. Isso pode resultar em mau desempenho. Um nó específico no DOM pode ser observado especificando um alvo:
$.initialize(".some-element", function() {
$(this).css("color", "blue");
}, { target: document.getElementById('observe-this-element') });
Caso contrário, o destino será padronizado como document.documentElement
.
observer
Um MutationObserverInit
personalizado pode ser fornecido. Se não for fornecido, o padrão será a configuração interna.
O plug-in é baseado em MutationObserver
. Ele funcionará no IE9 + ( leia a nota abaixo ) e em todos os navegadores modernos.
Nota: Para fazê-lo funcionar no IE9 e IE10, você precisará adicionar o polyfill MutationObserver - como os aqui: https://github.com/webcomponents/webcomponentsjs
Teste de desempenho (graças a @bezborodow e @liuhongbo )
bower
e npm
, adicione teste de desempenho avançado.