リスティング広告 運用代行サービス|株式会社カルテットコミュニケーションズ|Yahoo広告/Google広告正規代理店

【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以降で使用できます。知らなかったという人はぜひ活用してみてください。

1営業日以内に返信いたします 広告の運用代行についてのお問い合わせはこちら
シェアする

ブログ記事の中で広告運用の事例をご紹介することがありますが、実際の事例を一部加工した内容となっておりますのでご留意ください。

また、2018年7月24日よりGoogle AdWordsはGoogle広告に名称変更されました。それ以前の記事に関してはGoogle AdWordsと表記されておりますのでご了承ください。


リスティング広告の
情報をお届け

メルマガではリスティング広告に詳しくなれる記事を毎週一週間分まとめてお届けします。不定期にはなりますがリスティング広告に限らず、Web集客改善に繋がる資料もお送りしていきますので、興味のある方はぜひご登録ください。

同じカテゴリの最近の記事