admin 管理员组

文章数量: 1087132

I'm trying to use MutationObserver to check for new rows being added inside of a table, the code I've got below seems to work for H2 elements, however when I change this to Table rows, the console.log doesn't output to the console, if i inspect the table, the TR's are being added. Does anyone have any ideas? I can't figure out why it wont observe table row's being added

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);

Here's a working fiddle: /

I'm trying to use MutationObserver to check for new rows being added inside of a table, the code I've got below seems to work for H2 elements, however when I change this to Table rows, the console.log doesn't output to the console, if i inspect the table, the TR's are being added. Does anyone have any ideas? I can't figure out why it wont observe table row's being added

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);

Here's a working fiddle: http://jsfiddle/ggwb2ejy/

  • javascript
  • jquery
  • html
Share Improve this question asked Oct 24, 2014 at 9:11 NamenoneNamenone 3442 gold badges6 silver badges19 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 10

You need to set the subtree option to true

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

When you add a tr it is not directly added to the table it is added to a tbody element, so in reality a subtree of the observed element is modified. To observe any changes in the subtree you need to set subtree: true in the configuration

Demo: Fiddle

本文标签： javascriptMutationObserver not detecting additional table rowsStack Overflow

版权声明：本文标题：javascript - MutationObserver not detecting additional table rows - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744073725a2528960.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。