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

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

$('#menu_wrap').children('ul').fadeToggle();

1	$('#menu_wrap').children('ul').fadeToggle();

みたいに書けます。

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

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

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

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

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

結論からいうと、

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

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

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

$('#nav_wrap')
    .prepend('<a href="#" id="switch">menu</a>')
    .bind('click',function(){
        $('.sub-menu').show();
        $(this).children('ul').fadeToggle();
        return false;
});

$('#nav_wrap')

.prepend('<a href="#" id="switch">menu</a>')

.bind('click',function(){

$('.sub-menu').show();

$(this).children('ul').fadeToggle();

return false;

});

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

デモ

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

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

<a href="#" id="switch">menu</a>

1	<a href="#" id="switch">menu</a>

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

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

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