jQueryでのライブとbindメソッドの違い

1113 ワード

jQueryは、一致するすべての要素にイベント処理関数を追加し、この要素が後で追加されても有効です.
この方法は基本的です.bind()法の変異体.使用するbind()の場合、セレクタが一致する要素にはイベント処理関数が追加され、後で追加する要素はありません.そのためにはもう一度使用する必要がある.bind()でいいです.例えば
<body>
<div class="clickme">Click here</div>
</body>

この要素に簡単なclickイベントをバインドできます.
$('.clickme').bind('click', function() {
alert("Bound handler called.");
});

要素をクリックすると、警告ボックスがポップアップします.そして、この後に別の要素が追加されたことを想像してみてください.
$('body').append('<div class="clickme">Another target</div>');

この新しい要素はセレクタ「.clickme」にもマッチするが、この要素が呼び出されているためである.bind()の後に追加されたので、この要素をクリックしても効果はありません.
.live()はこのような状況に対応する方法を提供しています.clickイベントをこのようにバインドした場合:
$('.clickme').live('click', function() {
alert("Live handler called.");
});

新しい要素を追加します.
$('body').append('<div class="clickme">Another target</div>');

新しい要素をクリックすると、彼は依然として触れることができます.