onload後に構築した要素に対してイベントや関数が効かないときには

いやー、ハマった！
これは困ってた！

ので、メモしておきます。

ハマったとこ

こういう要素があったとして、

<ul id="list">
<li>hoge</li>
<li>ioge</li>
<li>joge</li>
<li>koge</li>
</ul>

例えばAjaxで、こうなったとします。

<ul id="list">
<li>hoge</li>
<li>ioge</li>
<li>joge</li>
<li>koge</li>
<li>loge</li> <!-- 後から追加した要素-->
<li>moge</li> <!-- 後から追加した要素-->
</ul>

で、

$('#list li').click(function(){
//なんやかんや
});

こういうイベントを設定してたとします。

なんででしょう、最初からあった要素に対しては関数が動くのに、後から追加したやつには効かない・・・。

これならOK

$('#list li').live('click', function(){
//なんやかんや
});

そう！

参考：live(type, fn) - jQuery 日本語リファレンス

こういう風に書けば良いのねー。

ただ全てのイベントが対応しているわけではなく、

この関数で指定できるイベントは、次の通りです:
click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
現時点ではサポートしていないイベントは、次の通りです:
blur, focus, mouseenter, mouseleave, change, submit

だそうです。

そういえば

「ページのソースを確認」ってした時に、Ajaxで取得した要素が反映されてないのと同じ原理やねんけど、それに気づくまでに2時間かかった・・！
みなさまもお気をつけください！