###実現したいこと
動的に追加された要素に、jQueryUIのオートコンプリートを適用させたいです。
###問題
現在次のコードでautocomplete
を使っているのですが、
ご覧のように、ボタンのクリックで<input type="text" class="name">
が後から追加されるので、その後から追加された方にautocomplete
が効きません。
何か良い方法はございませんでしょうか?
jquery
1<input type="text" class="name"> 2<button type="button">.nameの追加ボタン</button> 3 4<script> 5// 追加をクリック 6$(document).on("click","button", function(){ 7 // 追加を実行 8 $(this).before('<input type="text" class="name">'); 9}); 10 11// オートコンプリートを実行 12var name_arr = ['hanako','taro']; 13$( ".name" ).autocomplete({ 14 source: name_arr 15}); 16</script>
###試したコードA
もしinput
やkeyup
なら$(document).on
を使ってこのような形式↓になると思うんですけど、これは出来ませんでした。
jquery
1// オートコンプリートを実行 2var name_arr = ['hanako','taro']; 3$(document).on("autocomplete",".name", function(){ 4 source: name_arr 5});
###試したコードB
また、関数を外に置いてこのような形式↓にもしてみたのですが、こちらも出来ませんでした。
jquery
1// 追加をクリック 2$(document).on("click","button", function(){ 3 // 追加を実行 4 $(this).before('<input type="text" class="name">'); 5 // オートコンプリートを実行 6 autocompleteInit; 7}); 8 9// オートコンプリートの関数 10var name_arr = ['hanako','taro']; 11var autocompleteInit = function() { 12 $(".name").autocomplete({ 13 source: name_arr 14 }); 15}; 16
どうすれば後から追加された分にもautocomplete
を効かせられるようにできますでしょうか。
もし良い方法がございましたらご教示頂けますと幸いです。
宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/16 23:47
2019/02/17 06:44