【jQuery】bind／liveメソッドを使ってイベント・リスナを効率的にセットする

bindメソッドで複数のイベントに同じコールバック関数をセット

jQueryでイベント・リスナを設定するやり方として、以下のようなものがよく見られます。

$(".target").click(function() {
    // do something.
});

上記のようにclickイベントにだけリスナを設定したのであれば良いのですが、例えばclickイベントとchangeイベントの二つに対して同じコールバック関数をセットしたいような時に、以下のようなコードを書いていませんか？

$(".target").click(function() {
    // do something.
});
$(".target").change(function() {
    // do something.
});

こんな書き方をしなくても、複数のイベントに対して一気にリスナを設定する方法があります。それが、bindメソッドを使う方法です。

$(".target").bind("click change", function() {
    // do something.
});

基本的なことですが、意外と知らなかったという人も多いのではないでしょうか。

liveメソッドで動的に追加した要素のイベントにも対応

bindメソッドでイベント・リスナをセットした場合、その後にjavascriptで動的に生成された要素のイベントは拾えません。

これを解決するために、DOMの生成と同時にイベント・リスナをセットし直すような処理を書いているコードをよく見かけます。

実は、これももっと簡単な方法で解決することが出来ます。それが、liveメソッドを使う方法です。使い方はbindメソッドと全く同じで、

$(".target").live("click change", function() {
    // do something.
});

こんな感じでOKです。これだけで、現在すでに存在している要素だけでなく、将来マッチするであろう要素にもイベント・リスナを適用してくれます。

liveメソッドはjQuery 1.3以降で使用できます。知らなかったという人はぜひ活用してみてください。