質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2396閲覧

jQueryで後から追加した要素にイベントを設定する場合のセレクタにuser.idを使いたい

yamamoto11081

総合スコア16

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/04/25 12:14

jQueryの非同期通信で、ユーザーを検索し、検索したユーザーを選択するとグループメンバーリストに追加するという機能を実装したい。

検索キーワードに合致するユーザーの一覧をappendで追加表示し、
その中から1人を選択するため、イベントのセレクタにuser.idを指定したいのですが
その記述がうまく行きません。
具体的には、appendListで作ったhtmlで指定したid=${user.id}を
clickイベントのセレクタに利用したいです。
どのように記述したら良いのでしょうか。

js

1$(function() { 2 $(document).on('turbolinks:load', function () { 3 4 var search_list = $("#user-search-result"); 5 var selected_list = $("#chat-group-users"); 6  //検索に合致するユーザーを表示 7 function appendList(user) { 8 var html = `<div class="chat-group-user clearfix"> 9 <p class="chat-group-user__name">${ user.name }</p> 10 <div class="user-search-add chat-group-user__btn chat-group-user__btn--add" id="${ user.id }" data-user-name="${ user.name }">追加</div> 11 </div>` 12 search_list.append(html) 13 } 14  //検索後、選択されたユーザーをグループリストに追加 15 function appendUser(user) { 16 var html = `<div class='chat-group-user clearfix js-chat-member' id='chat-group-user-8'> 17 <input name='group[user_ids][]' type='hidden' value='${ user.name }'> 18 <p class='chat-group-user__name'>${ user.name }</p> 19 <div class='user-search-remove chat-group-user__btn chat-group-user__btn--remove js-remove-btn'>削除</div> 20 </div>` 21 selected_list.append(html) 22 } 23 24 25 $("#user-search-field").on("keyup", function() { 26 var input = $("#user-search-field").val(); 27 28 $.ajax({ 29 type: 'GET', 30 url: '/users', 31 data: { keyword: input }, 32 dataType: 'json' 33 }) 34 35 .done(function(users) { 36 $("#user-search-result").empty() 37 if (users.length !== 0) { 38 //user検索し、合致するユーザーを表示。後にグループに追加するユーザーを選択する際に使うidにuser.idを指定 39 users.forEach(function(user) { 40 appendList(user); 41 //検索結果からユーザーを1人選択し、グループメンバーに追加。 ここでuser.idを指定したい。 42 $("#user-search-result").on("click", "#${user.id}", function() { 43 appendUser(user); 44 }); 45 46 }); 47 } 48 }) 49 50 .fail(function() { 51 alert('ユーザー検索に失敗しました'); 52 }) 53 }); 54 }); 55}); 56

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

テンプレート文字列はシングル/ダブルクォートではなく、バッククォート(Shift+@) で囲みます。

`#${user.id}`

投稿2019/04/26 04:50

moredeep

総合スコア1507

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamamoto11081

2019/04/26 10:32

この方法でいけました!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問