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

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

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　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イベントが追加されています）。