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(){ //なんやかんや });
そう!
こういう風に書けば良いのねー。
ただ全てのイベントが対応しているわけではなく、
この関数で指定できるイベントは、次の通りです:
click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup現時点ではサポートしていないイベントは、次の通りです:
blur, focus, mouseenter, mouseleave, change, submit
だそうです。
そういえば
「ページのソースを確認」ってした時に、Ajaxで取得した要素が反映されてないのと同じ原理やねんけど、それに気づくまでに2時間かかった・・!
みなさまもお気をつけください!