小粋空間  -  a cheap joke and a play on words site

jQueryのlive関数を使ってAjaxで取得したコンテンツにイベントハンドラを登録する

jQueryのlive関数について紹介します。

live関数の使用例として、コンテンツの折りたたみをサンプルに用います。

１．コンテンツの折りたたみ

h3要素をクリックしたときに、h3要素の次にあるul要素全体を折りたたむには、次のようなjQueryのコードを記述します。実際の動作は「サンプル1」のリンク先で確認できます。

サンプル1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    $("h3").click(function() {
        $(this).next().slideToggle(0);
    });
});
</script>
<h3>最近のブログ記事</h3>
<ul>
  <li>モバイルサイトオープン</li>
  <li>業務提携に関するお知らせ</li>
  <li>ソリューションセミナー</li>
  <li>Movable Type 入門セミナー</li>
  <li>オフィシャルサイトオープン</li>
</ul>

または次のようにbind関数を利用して、clickイベントに対応するイベントハンドラを登録します。

…前略…
<script>
$(function() {
    $("h3").bind('click',function() {
        $(this).next().slideToggle(0);
    });
});
</script>
…後略…

２．Ajax＋コンテンツの折りたたみ（NG）

ところが、次のようにコンテンツ部分をAjaxで読み出すようにすると、clickイベントが効かなくなります。

サンプル2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    $('#foo').load('data.txt');
    $("h3").click(function() {
        $(this).next().slideToggle(0);
    });
});
</script>
<div id="foo"></div>

Ajaxで読み出すデータ（data.txt）

<h3>最近のブログ記事</h3>
<ul>
  <li>モバイルサイトオープン</li>
  <li>業務提携に関するお知らせ</li>
  <li>ソリューションセミナー</li>
  <li>Movable Type 入門セミナー</li>
  <li>オフィシャルサイトオープン</li>
</ul>

これではAjaxで取得したデータに含まれる要素に対し、イベントハンドラ登録が行えません。このような事象を回避するためにlive関数を利用します。

３．Ajax＋コンテンツの折りたたみ（OK）

live関数は、イベントハンドラ登録時に存在する要素（ここではh3要素）だけでなく、新たに発生する要素に対してもイベントが適用されます。

今回のサンプルで言えば、Ajaxで取得したデータにh3要素が含まれていれば、そのh3要素に対しても、clickイベントのイベントハンドラが有効になります。

サンプル3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    $('#foo').load('data.txt');
    $("h3").live('click',function() {
        $(this).next().slideToggle(0);
    });
});
</script>
<div id="foo"></div>

live関数の第1パラメータに指定できるイベントは下記の10種類です。

• click
• dblclick
• mousedown
• mouseup
• mousemove
• mouseover
• mouseout
• keydown
• keypress
• keyup

live関数の使い方が理解できると、jQueryをさらに活用できそうです。