WEBサービス創造記

WEBサービスを作ったり保守したりしてる人のメモブログです。

jQueryで、動的に追加した要素にイベントハンドラを適用する

      2012/12/18

live関数でのイベントハンドラの登録

例えば、以下のようなソースがあったとして・・・

test.html
<!DOCTYPE HTML>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>イベントハンドラテスト</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
    $(document).ready(function(){
        $('ul#items li').click(function(){
            alert('クリックされました。');
            return false;
        });
        $('a#add').click(function(){
            $("ul#items").append("<li>新しいアイテム</li>");
            return false;
        });
    });
</script>
</head>
<body>
<a href="#" id="add">追加</a>
<ul id="items">
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>
</body>
</html>

ready時に存在したli要素(上記ソースだとアイテム1〜3)に対してはイベントハンドラが動くのに、後で動的に追加したli要素(新しいアイテム)に対しては関数は動きません。

後から追加した要素でもready時から定義してあるイベントハンドラを動作できるようにするには、以下のようにlive関数でハンドラを定義します。

test.html
//$('ul#items li').click(function(){ // ← これだと動かない
$('ul#items li').live('click', function(){ // ← これだと動く
    alert('クリックされました。');
    return false;
});

これでready後に追加したli要素でもクリック時にイベントが発生するようになります。

ただし、このlive関数はjQuery1.3から実装されたようで、それ以下のバージョンでは利用できません。
また、live関数がサポートしているイベントは、
click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
のみで、
blur, focus, mouseenter, mouseleave, change, submit
などのイベントはサポートされていません。

live関数で対応していないイベントでもこういった処理を行いたい場合は、livequeryというjQueryのプラグインを使うといいみたいです(未確認)。
Plugins/livequery – jQuery JavaScript Library

 - jQuery ,