動的に追加したDOM要素にイベントを設定する！

はじめに

持ち駒カウンターを作った。jQueryで操作しているので、DOMを動的に追加などをするのだが、動的に追加したDOM要素にイベントが上手く設定されなかった。

hagetak.hatenablog.com

コード例

<div>
 <button class="addItemButton"> </button>
  <div class="itemList">
     <li class="remove"> 追加エリア </li>
     <!-- 以下から追加 -->
  </div>
</div>

$('.addItemButton').on('click', function(){
  $('.itemList').append('<li> class="remove">Hello </li>')
})

$('.remove').on('click', function(){
  $(this).remove()
})

解決法

jQuery - 動的に追加したDOM要素にイベントハンドラを設定する - Qiita

JavaScript - 動的に追加されるDOM要素に対応する方法あれこれ - Qiita

この書き方は、これらの記事と同様で、onを使っている。引数が足らないが、これらと同じ形式にしてもイベント要素が追加されなかった。

今回、以下の様な書き方で実現できた。

$(document).on('click', '.remove', funciton(){
  $(this).remove()
})

原因はわからない。普段は、上のような書き方でできるのだが、今回引っかかったのでメモとしておく。

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

はじめて学ぶ enchant.jsゲーム開発