jsで追加した要素のclickイベントが発火しない!

jsで追加した要素のclickイベントが発火しない!

たったひとつのdivで麻雀牌も描画できるCSSすごいで少し触れたように麻雀点数計算アプリを作ろうとしていて、jsでごにょごにょやってるのですが、ひとつ行き詰まりました。

ユーザーに面子を入力させるのですが、そのたびに選択された面子の要素を追加したり、削除したりする必要があります。これでひっかかった。

最初に素直に書いたソースはこんな感じ。
アプリはtouchイベント使っていますがサンプルなのでclickです。

See the Pen epmBaM by natsumi (@mayo31) on CodePen.18228

まず、もともとhtmlで記述されているli要素は、クリックするとピンクに変わります。
 → 実際のアプリだと、タップで面子を削除する処理。
そして、ボタンをクリックしてもらうとli要素が新たに追加されていきます。
 → 実際のアプリだと、面子を追加する処理。
さらに、追加したliをクリックすればピンクに・・・

ガ━━(;゚Д゚)━( ゚Д)━(  ゚)━(   )━(゚;  )━(Д゚; )━(゚Д゚;)━━ン!!!!!

変わらないんです。ピンクに・・・

動的に追加した要素はDOM操作できない

あたりまえですね。だって、htmlを見てください。
そんなやつ、いないんですから。

<ul id="list">
	<li>最初からあるリスト1</li>
	<li>最初からあるリスト2</li>
</ul>

追加した要素に対して、classの変更などは適用されるのに、clickイベントは発火しない。
解決策は、こんな感じです。htmlとcssは上記サンプルと同じで、jsのみ変わっています。

See the Pen dYPRBp by natsumi (@mayo31) on CodePen.18228

違いは、クリックされた要素がなにか?という目の向き先を変えることです。
もともと存在していなかったliではなく、親要素のクリックイベントに引数としてliを指定します。

サンプルはjQueryなので、’#list li’って感じでCSSと同じセレクタを使えるから要素を絞り込みやすい。

これを知らないで大規模なHTMLでガチガチのCSSコーディングしていたらと思うと((((;゚Д゚))))