第6回 イベント編連載:jQuery逆引きリファレンス(13/14 ページ)

» 2010年04月23日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 liveメソッドは、bindメソッド<event>(fnc)メソッドと同じく、特定のイベントに対してイベント・リスナを適用します。ただし、bindメソッドや<event>(fnc)メソッドと異なる点は、現在すでにある要素だけではなく、将来的にマッチするであろう要素に対してもイベント・リスナを適用するという点です。jQuery 1.3で追加されました。

 具体的な例を見てみましょう。以下は、[追加]ボタンをクリックするたびに、ボタンが増えていくサンプルです。

<script type="text/javascript">

$(function() {
  // ボタン・クリック時にボタンを追加
  $(':button').live('click', function() {
    $('form').append($('<input type="button" value="追加" />'));
  });
});

</script>

  ……中略……

<form>
  <input type="button" value="追加" />
</form>

リスト102 [追加]ボタンをクリックするたびに、ボタンを追加(Live.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


[追加]ボタンをクリック


[追加]ボタンをクリック

リスト102の実行結果
[追加]ボタンをクリックするたびに、ボタンを追加(Live.html)

 このとき、イベント・リスナによって動的に生成されたボタンをクリックしても、やはりボタンが追加される(つまり、イベント・リスナが適用されている)ことを確認してください。

 ちなみに、リスト102の太字部分を「bind」と置き換えて実行してみるとどうでしょう。今度は、動的に(後から)追加されたボタンをクリックしても、ボタンはさらには追加されない(つまり、イベント・リスナは認識されていない)ことが確認できるはずです。

 なお、jQuery 1.3のliveメソッドで指定できるイベントは、以下のものに限られます。

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

 以下のイベントには対応していませんので、注意してください。

blur、focus、mouseenter、mouseleave、change、submit

 jQuery 1.4ではこの制限は大幅に緩和され、blur、focusを除くすべてのイベントが利用できます(また、blur、focusイベントについても、代替可能なfocusout、focusinイベントが追加されています)。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。