2011/02/24

jQueryのclckでみる、bindとliveの違い

jQueryを使っていると似たような動きをするメソッドを見かけます。
今回はクリックイベントで呼ばれるbindとliveの違いをメモ。

jQuery1.3からliveが追加されました。
今まではjQueryのafterを使って動的に作られた要素に対してハンドラはバインドされませんでした。liveを使うことで動的に作った要素に対してもハンドラを呼び出すことができます。

HTML

<ul id="hoge1">bind("click", ハンドラ)
 <li>ここは一回だけ押す</li>
</ul>
<ul id="hoge2">live("click", ハンドラ)
 <li>ここは一回だけ押す</li>
</ul>
<ul id="hoge3">click(ハンドラ)
 <li>ここは一回だけ押す</li>
</ul>

スクリプト

// イベントハンドラ。動的にli要素を追加する。
var handler = function() {
 $(this).after('<li class="nc">ここをクリックして</li>');
}
$(function() {
 $("li", "#hoge1").bind("click", handler);
 $("li", "#hoge2").live("click", handler);
 $("li", "#hoge3").click(handler);
});

demo :

    bind("click", ハンドラ)
  • ここは一回だけ押す
    live("click", ハンドラ)
  • ここは一回だけ押す
    click(ハンドラ)
  • ここは一回だけ押す




liveを使うことで、動的に追加されたli要素に対して、自動的にイベントハンドラを
バインドしてくれます。
ちなみに、click()はbindのショートカットなので、bind('click', ハンドラ)と同じ動きをします。
Labels: ,