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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/26 10:32