[jQuery][JavaScript]ajaxとかで動的に追加された要素が読み込まれたらプラグインを発火させるやり方

たま〜にやってきては覚えられないせいで毎回詰まって死ぬので備忘録です。

普通に指定してもできない

動的要素なので普通に $(‘.element’)で指定しても意味がわかってもらえません。動かないよ。

親要素のイベントを利用するやり方でもだめ

下記のやつはよく出てくるんですけどクリックイベントとかは取れますがloadはさすがにだめだった　理解が浅いので解説はできません。

$('親要素').on( 'click', '子要素', function(){....});

MutationObserverを使おう

半ギレでさまよっていたらこの記事に当たりました

jQuery 動的に読み込んだDOM要素の表示完了時にjQueryプラグインを適用したい（stack overflowより）

またMDNによる解説は下記

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

「親要素をトリガーにして子要素の追加を監視する」というやり方の場合Ajaxとかでなにか追加された瞬間に指定した関数を実行してくれます。

コードは下記

頭が悪くて隅々まで理解できないので型として覚えておくしか無い…

// 画像の親要素を取得・変数定義（この場合クラスを利用）
var target = document.getElementsByClassName('親要素（クラス名）');

// DOM操作時の動き
function yaritaiKoto() {
  //ここにやりたい処理
}

// MutationObserver登録・処理
var mo = new MutationObserver(yaritaiKoto);

 //だいたいの場合でtargetは複数あって、配列になるのでeachで処理
$(target).each( function(i){
  mo.observe(target[i], {childList: true}); // 子要素が登録されたら
});

またぶち当たったら思い出すぞ……