检测DOM中的更改
检测DOM中的更改
提问于 2010-07-10 23:21:08
当一些div或输入被添加到html中时，我想执行一个函数。这个是可能的吗？
例如，添加一个文本输入，则应该调用该函数。
回答 6
Stack Overflow用户
发布于 2018-05-24 01:04:38
下面的例子改编自Mozilla Hacks的blog post并使用了MutationObserver。
// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();浏览器支持: Chrome 18+、火狐14+、IE 11+、Safari 6+
Stack Overflow用户
发布于 2015-02-07 00:02:57
我最近写了一个插件就可以做到这一点-- jquery.initialize
它的使用方法与.each函数相同
$(".some-element").initialize( function(){
$(this).css("color", "blue");
});与.each的不同之处在于-它接受你的选择器，在本例中是.some-element，并等待将来使用这个选择器的新元素，如果要添加这样的元素，它也将被初始化。
在本例中，初始化函数只需将元素颜色更改为蓝色。因此，如果我们要添加新元素(不管是使用ajax，甚至是F12检查器或任何其他元素)，比如：
$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!插件会立即初始化它。plugin还确保一个元素只初始化一次。因此，如果您添加元素，然后从主体.detach()它，然后再次添加它，它将不会再次初始化。
$("<div/>").addClass('some-element').appendTo("body").detach()
.appendTo(".some-container");
//initialized only once插件是基于MutationObserver的-它将在IE9和10上工作，依赖于readme page上的详细信息。
Stack Overflow用户
发布于 2020-11-23 18:48:22
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// fired when a mutation occurs
console.log(mutations, observer);
// ...
});
// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
subtree: true,
attributes: true
//...
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3219758
复制相关文章
相似问题