用 DOMSubtreeModified 代替 MutationObserver 问题

Question

我正在尝试检查新的 table 行 <tr> 是否被添加到 table 中，如下所示：

var myTab;e = $('#myTable tbody');
myTab.on("DOMSubtreeModified", function() {
  console.log('Row added');
});

但是这会打印出 100 条 'Row added' 消息，例如，如果同时向 table 添加 10 行，即使其中之一我仍然打印出 'Row added' 10次。这让我想到它正在监听 myTable 内的所有变化，这不是我想要的。我只希望它执行一次，即使添加了 100 行（一次批量添加行）。

我通过以下方式找到了另一个解决方案：MutationObserver 但无法弄清楚如何设置它以完成我的任务（一旦行添加到 myTable）执行一次更改事件.

这是 table 的示例标记。

<table id="myTable">
    <thead>
    <tr>
     <th>
      <div>Date</div>
      <span>Time</span>
   </th>
    </tr>
    </thead>

    <tbody>
    <tr>
      <td>Content</td>
      <td>More content</td>
    </tr>

    <tr>
      <td>Content</td>
      <td>More content</td>
    </tr>

    <!-- etc.. -->
  </tbody>
</table>

这是一个非常简单的版本，省略了类、数据属性、id 和其他元素，但应该可以解决问题。

Answer 1

var target = $("#myTable").get(0);

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // do stuff when
    // `childList`, `subtree` of `#myTable` modified
    alert(mutation.type);        
  });    
});

// configuration of the observer:
var config = { childList: true, subtree:true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

$("#myTable tbody").append("<tr><td>abc</td></tr><tr><td>def</td></tr>")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable">
    <thead>
    <tr>
     <th>
      <div>Date</div>
      <span>Time</span>
   </th>
    </tr>
    </thead>

    <tbody>
    <tr>
      <td>Content</td>
      <td>More content</td>
    </tr>

    <tr>
      <td>Content</td>
      <td>More content</td>
    </tr>

    <!-- etc.. -->
  </tbody>
</table>

用 DOMSubtreeModified 代替 MutationObserver 问题

Substituting DOMSubtreeModified for MutationObserver issues

javascript

jquery

dom

mutation-observers