現在プログラミングスクールでチャットアプリを作成中。目下ajaxについて勉強しています。

今回は、ビューのローディング時に存在していない要素をajaxで追加したあと、その要素をクリックした時に発火させたい場合どうするかについて書きます。

例えばhamlで

#user-search-result

とidをつけたところに子要素としてajaxで

  function buildHTML(user) {
    var html =`<div class="chat-group-user clearfix">
                  <p class="chat-group-user__name">${user.name}</p>
                  <a class="user-search-add chat-group-user__btn chat-group-user__btn--add" data-user-id="${user.id}" data-user-name="${user.name}">追加</a>
                </div>`
    return html;
  }

（中略）

    .done(function(data) {
      $('#user-search-result').empty();
      if (data.length !==0) {
        data.forEach(function(data){
          var html = buildHTML(data);
          $('#user-search-result').append(html)
        });
      }
    })

というようにhtmlの記述を差し込んだとします。

ここでhtmlの「追加」ボタンを押したらイベントが発火する仕様にしたい場合、

  $(".chat-group-user .user-search-add").on("click",function() {処理});

としても、このhtmlはロードした後に差し込んだものなので上手く動きません。

このような場合、元からビューに存在していた、親要素である

#user-search-result

を引数として取って

  $("#user-search-result").on("click",".chat-group-user .user-search-add",function() {
  });

と書くと想定通りの動きをするようになります。

以上、拙い内容でしたがご参考まで。