Question

我正在尝试使用MutationObserver来检查表中添加的新行，我在下面得到的代码似乎适用于H2元素，但是当我将其更改为表行时，console.log不会输出到控制台，如果我检查表，则正在添加TR。有没有人有任何想法？我无法弄清楚为什么它不会观察到表格行被添加

var list = document.getElementById("testtable");

var MutationObserver = window.MutationObserver ||
    window.WebKitMutationObserver || 
    window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {  
    mutations.forEach(function(mutation) {
        if (mutation.type === 'childList') {
           console.log("mutation!");
        }
    });
});

observer.observe(list, {
    attributes: true, 
    childList: true, 
    characterData: true 
});

var element = ("tr");


setInterval(
    function(){ 
        $(list).append("<h2>" + "THIS IS A TEST" + "</h2>");
        //This doesn't work
        //$(list).append("<tr>" + "<td>" + "<h2>" + "THIS IS A TEST" + "</h2>" + "</td>" + "</tr>");
    }, 
    2000);

这是一个工作小提琴：http://jsfiddle.net/ggwb2ejy/

Answer 1

您需要将subtree选项设置为true

observer.observe(list, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
});

当您添加tr时，它不会直接添加到table，而是会添加到tbody元素中，因此实际上会修改被观察元素的子树。要观察子树中的任何更改，您需要在配置中设置subtree: true

演示：Fiddle

MutationObserver未检测到其他表行

1 个答案: