カッパでも分かるiOSアプリゲーム開発

カッパがひたすらゲーム制作に関することを書くブログです。Railsに関するTipsもたまにまとめてます。

jQuery で動的要素のイベントハンドラの on が効かなくて困った話

スポンサードリンク

f:id:InvokeTwoA:20151219021952j:plain
f:id:InvokeTwoA:20151023183618p:plain「動的なイベントハンドラ取得ならon使っておけばOK!」
f:id:InvokeTwoA:20151009145746p:plain「そう思ってた時期が我々にもありましたねー」

  • on イベントをしても効かなくて焦った
  • ちなみに coffeeScriptなので注意
$('.hoge select').on 'change' ->
  alert 'buhi'

f:id:InvokeTwoA:20151023183618p:plain「何故かこれが動的に生成された .hoge クラスのselect に適用されなくて困った」
f:id:InvokeTwoA:20151009145746p:plain「ほほう、原因は?」
f:id:InvokeTwoA:20151023183618p:plain「.hoge クラスそのものが動的に入れ替わっていたのが原因だった。なので下記のようにすれば解決」

$(document).on 'change', '.hoge select', ->
  alert 'buhi'

f:id:InvokeTwoA:20151009145746p:plain「なるほど。onイベントを設定する親要素は静的じゃないといけないわけですな」
f:id:InvokeTwoA:20151023183618p:plain「言われてみれば当たり前なんだけど、なんか結構時間かかってしまった」
f:id:InvokeTwoA:20151009145746p:plain「プログラミングあるあるですな。原因を勘違いして別の事を調べちゃったりして」
f:id:InvokeTwoA:20151023183618p:plain「その間にネットサーフィンしちゃったりしてね」
f:id:InvokeTwoA:20151009145746p:plain「……」