我想执行一个函数时，一些div或输入被添加到html。 这可能吗?
例如，添加了一个文本输入，然后应该调用函数。
当前回答
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/a/11546242/6569224
其他回答
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/a/11546242/6569224
使用TrackChanges来检测html更改。 链接:https://www.npmjs.com/package/track-changes-js
例子
let button = document.querySelector('.button');
trackChanges.addObserver('buttonObserver', () => button);
trackChanges.addHandler('buttonObserver', buttonHandler);
function buttonHandler(button) {
console.log(`Button created: ${button}`);
}
在2022年发现了这个问题的解决方案。
我们已经看到了不同的解决方案，主要涉及MutationObserver。
如果有人想记录DOM更改并存储它们以便一段时间后重播，他们可以使用rrweb
编辑:
再举个例子，下面是一些提示:
rrweb您可以通过CDN或npm使用
让我们以CDN为例来记录DOM更改事件:
步骤1:只需在<HTML><head>标签中包含以下脚本标签
<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.2/dist/rrweb-all.js" crossorigin="anonymous"></script> .js
步骤2:并在代码中添加以下代码以捕获rrweb生成的事件。
<script>
var events = [];
rrweb.record({
emit(event) {
events.push(event);
// you can store this event anywhere and you can replay them later. ex: some JSON file, or DB
}
});
</script>
这个例子主要用于记录任何web应用程序的事件。
如需详细了解(如何录制/回放)，请参阅rrweb文档。
重播的例子:
这是为了调试，但添加在这里，以便任何人都可以检查重放的一面:
重复的例子
或者你可以简单地创建你自己的事件，到处运行
$("body").on("domChanged", function () {
//dom is changed
});
$(".button").click(function () {
//do some change
$("button").append("<span>i am the new change</span>");
//fire event
$("body").trigger("domChanged");
});
完整的示例 http://jsfiddle.net/hbmaam/Mq7NX/
我最近写了一个插件，就是这样做的——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确保一个元素只初始化一次。因此，如果您添加了element，然后.detach()它从body中，然后再次添加它，它将不会再次初始化。
$("<div/>").addClass('some-element').appendTo("body").detach()
.appendTo(".some-container");
//initialized only once
插件基于MutationObserver -它将在IE9和ie10上工作，并在自述页面上详细说明依赖关系。
