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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

4663閲覧

動的に追加された要素に、独自の関数を適用させたい

handhandy

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2019/02/16 22:20

###実現したいこと
動的に追加された要素に、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
もしinputkeyupなら$(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を効かせられるようにできますでしょうか。

もし良い方法がございましたらご教示頂けますと幸いです。
宜しくお願い致します。

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

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

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

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

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

guest

回答2

0

ボタンのクリックで<input type="text" class="name">が後から追加されるので、その後から追加された方にautocompleteが効きません。

これはそのとおり。

試したコードA

onを使うのはイベント登録。
JavaScriptのイベント登録っていうのはこれ。
「Aが起こったら引数に設定した関数を実行しといてねよろしく!」

だから因果が逆になっちゃう。
キーがタイプされたらオートコンプリートしたいのであって、
オートコンプリートされた事をトリガーに何の関数を実行させたいの?

つまり、当然そんなイベント誰も作らんよねって話で対応してません。


試したコードB
// オートコンプリートを実行

ふむふむ、いい感じに動きそうだね

autocompleteInit;

実行してないやん

関数の実行は()という風にお尻にカッコをつけるのがルール。
引数が存在しない場合は()という風に何も入れずにカッコを、
引数が存在する場合は(1, 2, 3)という風にカンマ区切りで値を入れた状態のカッコをお尻につけるルール。

autocompleteInit();に変更するだけで動くんじゃないかなぁ

投稿2019/02/16 23:40

miyabi-sun

総合スコア21158

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

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

handhandy

2019/02/16 23:47

すでにmts10806様をベストアンサーにしておりますが、詳しいご説明に大変感謝致します。かっこつけたら動きました。ありがとうございます。
m.ts10806

2019/02/17 06:44

ベストアンサーは取り消しできますし、元々質問者さんがやろうとしてたことにも近く効率的でもあるので質問者さんのご判断で良いですよ。
guest

0

ベストアンサー

.autocompleteをセットした要素を追加すれば良いかなと思います。

php

1$(document).on("click","button", function(){ 2 let add_text = $('<input type="text" class="name">').autocomplete({ 3 source: name_arr 4 }); 5 // 追加を実行 6 $(this).before(add_text); 7});

投稿2019/02/16 23:05

m.ts10806

総合スコア80765

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

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

handhandy

2019/02/16 23:32

すごくないですかそのテクニック。どうもありがとうございます。 実際には追加する要素が多くてバッククオートで囲んでいるんですが、その場合どのようにすればよろしいでしょうか? こちらになります。 https://jsfiddle.net/h4vjmesf/
m.ts10806

2019/02/16 23:40

やっていることは最初の下記と同じですよ。 $(".name").autocomplete({ source: name_arr }); 結局ですが $('<input type="text" class="name">') の '<input type="text" class="name">'はブラウザに設置されるまではただの文字列で jQueryの$()によってエレメント化されるようなもなので、要領は同じです。
handhandy

2019/02/16 23:48

同じとはいえ、とても考えつきません。勉強になりました。ありがとうございます。
m.ts10806

2019/02/17 00:27

phpなどサーバーサイドの言語でも同じですがブラウザに解釈されるまではただの文字列ですから。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問