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

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

Posted at September 7,2011 3:33 AM
Tag:[jQuery]

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

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

1.コンテンツの折りたたみ

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>
…後略…

2.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関数を利用します。

3.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をさらに活用できそうです。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)