このブログを購読する
【JavaScriptTips】あとから追加された要素のイベントもハンドルできるliveメソッド
2011.01.07 
こんにちは。プロダクト事業本部の佐藤です。
最近jQueryのliveメソッドがとっても便利だったので、これについてメモしておきたいと思います。
■イベントハンドラを登録
jQueryでイベントハンドラを登録する場合、普通ならbindメソッドを使って、
$('button.hello').bind('click', function(){
alert('こんにちは！');
});
のように書くか、もしくはイベントごとに用意されているメソッド(たとえばclickメソッド)を使って
$('button.hello').click(function(){
alert('こんにちは！');
});
というように書くのが一般的かと思います。
これらはどちらも同じ意味で、コードが実行された時点で「button.hello」というセレクタにマッチする要素(つまりhelloというclass属性を持つbutton要素)を探してきて、その要素にイベントハンドラを登録しています。
そしてliveメソッドですが、これは以下のようにして使います。
$('button.hello').live('click', function(){
alert('こんにちは！');
});
書き方はbindメソッドと同じです。しかし、意味はちょっと違っています。
liveメソッドを使った場合、今後そのセレクタにマッチする全ての要素に対してイベントハンドラが登録されます。bindはその時点でマッチした要素が対象でしたが、liveの場合はあとから追加された要素に対しても有効です。1度liveメソッドを呼んでおけば、そのあと要素が追加されたとしても、セレクタがマッチするならイベントがハンドルされるのです。
■サンプル
サンプルを作ってみました。
<!-- HTML -->
<p>
<button type="button" id="add_button">ボタン追加</button>
</p>
// JavaScript
$(function(){
$('button#add_button').click(function(){
var $b = $('<button type="button" class="hello">ボタン</button>');
$('p').append($b);
});
$('button.hello').live('click', function(){
alert('こんにちは！');
});
});
ボタン追加をクリックすると、class属性にhelloを持つボタンがどんどん追加されます。そして、どのボタンをクリックしても「こんにちは！」が表示されます。
「こんにちは！」を表示するイベントハンドラの登録は最初に一度しかおこなっていませんが、あとから追加されたボタンに対してもイベント処理が有効になっているのがわかります。
■やめるときはdieメソッド
liveメソッドで登録したイベントハンドラを削除するときは、dieメソッドを使います。
$('button.hello').die();
$('button.hello').die('click');
$('button.hello').die('click', handler);
引数なしの場合は、liveで登録した全てのハンドラを削除します。第一引数(イベントの種類)だけを指定した場合は、そのイベントのすべてのハンドラを削除します。第二引数(ハンドラ)まで指定した場合は、そのハンドラだけを削除します。
■使いどころを見つければ便利
通常のbindとの使い分けが難しいところですが、liveを使えば決められたclass属性をつけるだけで自動的にイベントがハンドルされますので、デザインとロジックの分離に役立ち、便利です。他にもいろいろ使える場面が考えられます。
思いがけないところでイベント処理が実行されないように気をつける必要はありますが、便利なので上手に使っていきたいものです。
