我想执行一个函数时，一些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
其他回答
在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文档。
重播的例子:
这是为了调试，但添加在这里，以便任何人都可以检查重放的一面:
重复的例子
使用MutationObserver界面，如Gabriele Romanato的博客所示
找到了，Chrome 18+，火狐14+
// The node to be monitored
var target = $( "#content" )[0];
// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
mutations.forEach(function( mutation ) {
var newNodes = mutation.addedNodes; // DOM NodeList
if( newNodes !== null ) { // If there are new nodes added
var $nodes = $( newNodes ); // jQuery set
$nodes.each(function() {
var $node = $( this );
if( $node.hasClass( "message" ) ) {
// do something
}
});
}
});
});
// Configuration of the observer:
var config = {
attributes: true,
childList: true,
characterData: true
};
// Pass in the target node, as well as the observer options
observer.observe(target, config);
// Later, you can stop observing
observer.disconnect();
使用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}`);
}
如何为这个扩展jquery ?
(function () {
var ev = new $.Event('remove'),
orig = $.fn.remove;
var evap = new $.Event('append'),
origap = $.fn.append;
$.fn.remove = function () {
$(this).trigger(ev);
return orig.apply(this, arguments);
}
$.fn.append = function () {
$(this).trigger(evap);
return origap.apply(this, arguments);
}
})();
$(document).on('append', function (e) { /*write your logic here*/ });
$(document).on('remove', function (e) { /*write your logic here*/ });
Jquery 1.9+已经建立了对此的支持(我听说没有测试过)。
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
