検索
連載

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

特定の要素セットに対して、イベント・リスナを設定したり、指定したイベントを実行したりするためのメソッドをまとめた、すぐに役立つ13本を一挙公開。

Share
Tweet
LINE
Hatena



「連載: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.

ページトップに戻る