【メモ】Javascriptによって追加された要素にJavascriptで何かをする

【メモ】Javascriptによって追加された要素にJavascriptで何かをする:

remodal.jsという鬼便利なプラグインでモーダルウインドウは実装しておりましたが、脱ぢぇーくえりーの為にそれっぽいものを自作しようと動き出した際に躓いた。

モーダルといえばレイヤー（よくある黒くて半透明なやつ）用のDOMが必要になるんだけど、予めコードの中にレイヤー用のDOMを仕込ませておいて表示非表示させれば比較的簡単なんだろうけど、ここはJavascriptで出し入れさせたい。

ぶっちゃけ、表示させるだけなら苦労しないけど、これを非表示にするために何らかの処理を走らせる必要があるのですが、いかんせんjavascriptで追加された要素なので、ただ単にそれに対して処理を走らせても存在していないもの扱いとなり動かない。

$(document).on('EVENT', 'TARGET', function(){ 
  //処理 
}); 

JQUERYならこんなんで監視しつつ好きなようにゴニョゴニョできたが、Javascriptではそう簡単にはいかない（メンドクサ・・・）

で、調べた結果、MutationObserverなるものを使い監視する必要があるとのことふむふむ。

まずはレイヤーDOMをBODY直下に追加する関数をザクッと（HTMLはめんどくさいので割愛）

function setOverlay(){ 
  document.addEventListener('DOMContentLoaded', function(){ 
    var triggerNode = document.getElementById('modal'); 
    triggerNode.addEventListener('click', function(){ 
      var parentNode = document.getElementsByTagName('body').item(0); 
      var newNode = document.createElement('div'); 
      newNode.id = 'overlay'; 
      parentNode.insertBefore(newNode, parentNode.firstChild); 
    }); 
  }, false); 
}; 
setOverlay(); 

ここで前述した監視役を投入

function DOMmonitor(){ 
  document.addEventListener('DOMContentLoaded', function(){ 
    var targetDOM = document.getElementsByTagName('body').item(0); 
    var observer = new MutationObserver(function(){ 
      if(document.getElementById('overlay') != null){ 
        console.log('overlayが追加されました'); 
      } 
    }); 
    observer.observe(targetDOM, {childList: true}); 
  }, false); 
} 
DOMmonitor(); 

これでレイヤーが追加されるとコンソールにメッセージが出ます。

なるほどねえ・・・。

めんどくささ半端ないｗ

自作モーダル完成までの道のりは遠いorz