当一些div或输入被添加到html中时,我想执行一个函数。这个是可能的吗?
例如,添加一个文本输入,则应该调用该函数。
发布于 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+
发布于 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上的详细信息。
发布于 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
//...
});
https://stackoverflow.com/questions/3219758
复制相似问题