MutationObserverサンプル

動的に追加・削除される要素に対して既存のスクリプトをあてるサンプル

by STSHISHO

HTML

<div id="container">
  <input type="button" id="btn_genDiv" value="click">
  <!-- ここにid0～id9のdivを生成 -->
</div>

CSS

#container {
  margin: 0 auto;
  width: 300px;
  height: 250px;
  background-color: #ccc;
}

[id^=div] {
  margin: 2px auto;
  width: 200px;
  height: 20px;
  background-color: #fff;
  text-align: center;
}

#div3{
  background-color: #fcf;
  font-weight: bold;
}

JavaScript

window.onload = () => {
  const showAlert = () => alert('clicked')
  const genDiv    = e => {
    const container = document.querySelector('#container')
    if (container.querySelectorAll('[id^=div]').length) return
    for (let i = 0; i < 10; i++) {
      let div = document.createElement('div')
      container.appendChild(div)
      div.id = `div${i}`
      div.innerText = i
    }
  }

  // ボタンクリクでdiv要素を生成
  const btn = document.querySelector('#btn_genDiv')
  btn.addEventListener('click', genDiv, false)

  const target = document.querySelector('#container') // スクリプト設定対象の親要素を設定
  const config = {childList: true} // 監視条件の設定

  //親要素に変化があった場合の処理設定
  const observer = new MutationObserver(() => {
    const div3 = document.querySelector('#div3')
    div3.addEventListener('click', showAlert, false)
  })

  // 監視開始
  observer.observe(target, config)
}