JavaScriptで追加されたものに対してイベントリスナーを適用させる方法

Question

コンテンツが縦並びになっているようなキュレーションサイトを作っています。

はじめに幾つかのコンテンツが表示されており、
スクロールで下に移動すると続きが表示される作りです。
これは以下のload.jsで管理しています（長くなってしまうため、端折っています）。
showContent()でコンテンツを追加しています。

load.js

var loading = false;
$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() + 250 >= $(document).height() ) {
    if (loading == false) {
      loading = true;
      showContent();
      loading = false;
    }
  }
});

各コンテンツにはお気に入りボタンが付いていて、クリックするとイベントリスナーで定義された動作が実行されます。これはfavorite.jsで管理しています。

favorite.js

$(".favorite").click(function () {
  $(this).toggleClass("favorite-after");
});

始めから表示されているコンテンツに対してはクリックイベントが実行されるのですが、load.jsで読み込まれた分に対してクリックイベントが実行されません。

コンソールを確認してもエラーは出ていません。
また、ブラウザ上で検証すると元から表示されていたコンテンツと同様にclassが記述されています。

イベントリスナーはそのコードを読み込んだ時点で表示されているものにしか適用されないのでしょうか。
ご存知の方がいましたらご回答をお願い致します。

Answer 1

イベントリスナーはそのコードを読み込んだ時点で表示されているものにしか適用されないのでしょうか。

仰るとおりです。

//$(".favorite").click(function () {
//↓
$(document).on("click", ".favorite", function () {

【参考】
jQuery 便利なonを使おう（on click) - Qiita
http://qiita.com/shizuma/items/d561f37f864c3ebb5096

jQuery の on() と off() を理解する - tacamy.blog
http://tacamy.hatenablog.com/entry/2013/03/03/213113

Comments

[roy29]

参考リンクも紹介していただき、ありがとうございます。
勉強になりました。

Answer 2

clickではなく、onを使いましょう。
リストの子要素に個別にイベントに割り当てるのではなく、その先祖に当たる要素にclickイベントを仕込みます。
そしてセレクターを指定することで、特定の子要から発火された場合のみ処理が実行されるようなことも可能です。

<ol class="favorites">
  <li class="favorite">
    // 色々ある
  </li>
  ... // 以下 li.favorite の繰り返し
</ol>

$(".favorites").on("click", ".favorite", function(e){
  // TODO:下記のまま動作するかは不明、要調査
  $(this).toggleClass("favorite-after");
});

Comments

[roy29]

なるほど、追加されるものにイベントを設定したい時は親要素に仕込むんですね。
とてもわかりやすかったです。
ありがとうございます。