[js]jQueryで追加した要素から発火させる方法

知らんと詰むので危ない。

どういうことか

• jQueryでボタンを作る
• ボタンをクリックしたら動作する処理を作る
• なんか動かんのだけど

という事が起きる場合がある。
例えば、幅判定でスマホ用レイアウトに切り替えた際のメニューボタンをjsで生成、PCレイアウトだと削除、SP幅でまた生成、という感じで作った場合、動かなかったり、1回目は動くけど2回目以降は動かないっていう。

現状だとどうしようもない（≒仕様と考えたほうがいい）ので対処方法を覚えましょう、という話。

やる

html要素の作成・削除自体はそのままでいい。作成した要素に関するイベントの書き方が変わる。

通常だと、クリックイベントに対してこんな感じになるかと思う。

$('.trigger').click(function(){
︙
})

$('.trigger').on('click',function(){
︙
})

それがこうなる。

$(document).on('click','.trigger',function(){
︙
})

注意点として、必ず.on()で記述すること。
次はダメな例。

$(document).click('.trigger',function(){
︙
})

ルールから逸れるので挙動がおかしくなる。

ついでにいうと、この記述でも複数指定は可能。

$(document).on('click','.trigger01, .trigger02, .trigger03',function(){
︙
})

この記述が必要な時点で結構ややこしいことになってると思うから、あんまり込み入らないように気をつけて。