[jQuery] live()が激しく便利な件について

最近jQueryを使って動的なページを作っており、頻繁にappend()やremove()を使ってページエレメントを追加・削除している。その時に面倒だったのが新たに追加したエレメントへのイベントのバインドだ。つまり、append()で追加したエレメントにイベントを毎度バインドするということをやっていた。

しかし、何かうまい方法があると思ってもう一度jQueryのドキュメントを見てみると、live()というチョー便利な関数が(version 1.3から追加されたみたいだ)。以下に簡単なサンプルを。

view plainprint?

1. // class=messageをクリックすると自分自身が消えるようにする  
2. $('.message').live('click', function() {  
3.     $(this).remove();  
4. });  
5.   
6. // id=addというボタンを押すと、class=messageというdivをページに追加  
7. $('#add').click(function() {  
8.     $('body').append('<div class="message">hello</div>');  
9. });  

// class=messageをクリックすると自分自身が消えるようにする
$('.message').live('click', function() {
    $(this).remove();
});

// id=addというボタンを押すと、class=messageというdivをページに追加
$('#add').click(function() {
    $('body').append('
hello
');
});

これまでは、要素が追加されるたびにbind()を使っていたのが、live()のおかげで楽チンになった。やっぱりjQueryはすばらしい。