Подставив DOMSubtreeModified для MutationObserver вопросы

Question

Я пытаюсь проверить, если новая строка таблицы <tr> были добавлены (s) к столу, как это:

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

Но это выводит на консоль 100 из «Row добавленных» сообщений, если, например, 10 строк добавляются в таблицу одновременно, даже если один из них я все еще распечатываю «Row добавил» 10 раз. Это заставило меня подумать, что он прослушивает абсолютно все изменения в пределах myTable, чего я не хочу. Я просто хочу, чтобы он выполнялся один раз, даже если добавлено 100 строк (ряды добавляются в массивную пару за раз).

Я нашел другое решение с помощью: MutationObserver, но не могу понять, как его настроить для достижения моей задачи (после того, как строки добавлены в myTable), выполните одно событие разговора.

Вот пример разметки для таблицы.

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

Это очень простой вариант это с вещами, как классы, атрибуты данных, идентификаторов и других элементов опущены, но должны сделать трюк.

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>