bl6.jp

bindとliveの違いがちょっとわかりずらかったのでまとめてみました。bindもliveも基本的な記述の仕方は同じなので、使い方を覚えれば色々応用できそうな感じですね。といってもまだそこまでの知識や技術がさっぱりなので大分時間がかかりそうですけど。

[ads_center]

bindメソッドの使い方

bindメソッドを使えば色んなイベントを対応させることができます。なので普通のイベント処理をbindを使って書くこともできます。

bindを使わない場合のやり方

まずはbindを使わずに普通にclickイベントの処理を書いてみます。

JavaScript

$(function(){
     $('#sample').click(function(){
          $('p').text('サンプルテキスト');
     });
});

HTML

<div id="sample"><p></p></div>

div#sampleをクリックするとサンプルテキストがp内に挿入されます。これを同じやり方でclickをbindに対応させるとこんな感じに記述できます。

bindを使うやり方

JavaScript

$(function(){
     $('#sample').bind('click', function(){
          $('p').text('サンプルテキスト');
     });
});

HTML

<div id="sample"><p></p></div>

このように各イベントを対応させることができます。また、bindはイベントオブジェクトも取得できます。

JavaScript

$(function(){
     $('#sample').bind('click', function(e){
          $('p').text('X座標: ' + e.pageX + ' / Y座標: ' + e.pageY);
     });
});

HTML

<div id="sample"><p></p></div>

CSS

#sample {
     width: 500px;
     height: 500px;
     background: #ccc;
}

div#sample内をクリックするとそのXY座標を表示させる処理です。

liveメソッドの使い方

liveメソッドは、あとから追加される要素にもイベント処理を設定することができます。bindは最初からある要素しかイベント処理を設定されないのですが、liveを使えば新しく追加された要素にも設定できます。

liveを使わないやり方

まずはliveメソッドを使わないで試してみます。下記はp.sampleをクリックするとdiv#wrap内の最後にp.classと同じ要素が追加されます。

JavaScript

$(function(){
     $('.sample').click(function(){
          $('<p class="sample">サンプル</p>').appendTo('#wrap');
     });
});

HTML

<div id="wrap">
    <p class="sample">サンプル</p>
</div>

上記の場合、最初のp.sampleをクリックすると新しく追加されますが、新しく追加されたp.sampleはクリックしても追加されません。これにliveを使えば新しく追加された要素にもイベント処理を適用させることができるようになります。

liveを使ったやり方

$(function(){
     $('.sample').live(
          'click',
          function(){
               $('<p class="sample">サンプル</p>').appendTo('#wrap');
          }
     )
});

これで、新しく追加された要素をクリックすればさらにまた新しい要素が追加されていきます。

まとめ

どちらも基本的な構文が同じなので、あとは使う状況に応じてちゃんと使い分けていければいいかなと思います。あ、でも1.7から.on()と.off()っていうイベント設定ができるようになったみたいですね。

jQuery 1.7の更新内容をまとめたよ。 | Ginpen.com

これから覚えるならこっちの方がよかったかもしれないっすね。あとで試してみようかと思います。