非同期で内容が変化する<table>をMutationObserverで監視し、イベントを発火させたい

以下のようなテーブルが存在し、

HTML
1<tbody id="targetTable">
2    <tr>
3        <td class="red">red</td>
4        <td class="green">green</td>
5        <td class="blue">blue</td>
6    </tr>
7</tbody>

こちらのclassや文言などが非同期処理で内容が変化した場合にイベントを発火させたいのですが、以下のコードでうまく動作せず困っております。

JavaScript
1$(function() {
2    var observer = new MutationObserver(function () {
3        console.log('changed');
4    });
5
6    observer.observe($('#targetTable')[0], {
7        attributes: true,
8        childList: true,
9        characterData: true,
10        subtree: true
11    });
12});

$(selector).on('DOMSubtreeModified propertychange', handler);

調べた結果、こちらでも同じ動作が期待できるとのことでしたがDOMSubtreeModifiedが非推奨とのことでしたので、MutationObserverクラスを利用した方法で何かご助言頂ければ幸いです。

yambejp

2018/01/11 06:36

非同期で処理をさせるトリガー側で対応はできないでしょうか？

doubutsu.karada

2018/01/11 06:49 編集

非同期で表示の制御を行っている処理が共通のjsファイルに有り（複数箇所のtableに使用）、それを監視する必要があるのは一箇所のみなので難しいです・・・。

yambejp

2018/01/11 06:55

そうなると内容が変化するたびに反応しそうですが、複数文字が変更になるとき1文字ずつ反応するイメージですか？

defghi1977

2018/01/11 07:02

> <table>をjQueryで監視しの部分ですが「MutationObserverで監視し」のほうが適切かと思います. また, tbody要素を監視しているようですが, table要素のinnerHTMLを書き換えている可能性はありませんか？

doubutsu.karada

2018/01/11 07:12

リンク押下時にテーブル内の属性値やテキストが動的に変化（LaravelのコントローラでレンダリングしたViewを表示）するので、1文字ずつ反応という形ではないと思います。DOMに変更が生じた場合に処理を発火、としたいです。

doubutsu.karada

2018/01/11 07:28

>defghi1977 様現在はajaxで非同期通信実行、成功の場合にtableの親要素にあたるdivの中身をempty()で空にしたあとappendで新しくhtmlを追加するという処理になっております。JavaScript初心者であまり詳しくないのですが、こちらは table要素のinnerHTMLを書き換えているということに当たるのでしょうか？