NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

jQueryであとから追加した要素にもイベントを関連付ける方法

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1209日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

jQueryで例えば #switch をクリックしたら、#nav_wrap の中にあるメニュー( ul 要素)をフェードインさせたいなんて場合は、

 みたいに書けます。

しかし、ページ読み込み後に append や prepend して追加した要素にはイベントを設定出来ません。

例えば、ページ読み込み後にスマホだったらメニュー本体を非表示にして、代わりに表示させるためのボタン(#switch)を追加してあげたい、みたいな場合はどうしましょう?

一番簡単なのは、CSSでPCのときは #switch 要素を非表示にしておいて、スマホの時は出すって方法ですが、もしその方法が使えない場合や、もっと他の理由で jQuery で後からボタンを追加してそこから操作したい場合はどうしたら良いのでしょうか?

今回はそれを調べてみました。

append (prepend) した要素を jQuery で選択する

結論からいうと、

append (prepend) したタイミングで、一緒にイベントも書いておく

ことで実現可能なようです。

例えば、 #menu_wrapの中に #switch を追加して、そこからその下にある ul 要素を表示・非表示させたい場合は、

 という風に書けばOKみたいです。

デモ

jsFiddle につくってみました。result を押すと実行されます。

html をみてもらうとわかりますが、はじめ html には

という要素はありません。これは読み込んだタイミングで jQuery で追加したものです。

そして要素を追加するタイミングでクリック時の動作まで記述しちゃうってわけなんですね。

こんな方法があるなんて知りませんでした…。

TAGS

Pingback / Trackback