第6回 イベント編:連載:jQuery逆引きリファレンス(13/14 ページ)
特定の要素セットに対して、イベント・リスナを設定したり、指定したイベントを実行したりするためのメソッドをまとめた、すぐに役立つ13本を一挙公開。
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>
この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.