- ベストアンサー
入力欄を動的に増減させるプログラムの作成方法
- プログラミング, jQueryプラグインを使って、入力欄を動的に増減させるデモ用のHTMLファイルを作成しましたが、実際には入力欄が増減できません。
- 問題の原因は、スクリプトで使用されているjQueryのバージョンが間違っていることです。
- 正しいバージョンのjQueryを使用すれば、入力欄の増減が正常に動作するようになります。
- iruiru298
- お礼率95% (116/121)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 プラグインを利用する際はそのjsを別途読み込む必要があります。 さて、提示いただいたソースで試すとこちらの環境では動いているように見受けられます。 １．textボックスとaddボタンが表示されている ２．Addボタンを押下すると2つめのtextボックスが表示、さらに1番目と2番目のtextボックスの横にDeleteボタンが表示される ３．Deleteボタンを押下するとその行のtextボックスが削除される IE11,GoogleChromeで確認しています。 開発者ツールでエラー等が出てないか見てみてください。
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 ソースをみる限りではjq本体しか読み込んでいませんが、プラグインのjsは読み込んでいますか？
お礼
回答ありがとうございます。 ＞プラグインのjsは読み込んでいますか？ なるほど、 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> ではだめということですね。 ということで、 jquery.addInputArea.4.2.js を検索してダウンロードして、下記のプログラムにしました。 ADDボタンを押して初めてDELTEボタンが出るように、デモに一歩近づきましたが、ADDボタンで肝心の入力項目が増えません。 引き続き、お願いします。 ーーー改訂版のHTMLですーーーー <html lang="ja-JP"> <head> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="jquery.addInputArea.4.2.js"></script> <script type="text/javascript"> $(function() { $('#list1').addInputArea(); }); </script> </head> <body> <ol id="list1"> <li class="list1_var"> <input type="text" size="40" name="list1_0" id="list1_0"> <button class="list1_del">Delete</button> </li> </ol> <input type="button" value="Add" class="list1_add"> </body> </html>
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 $('#list1').addInputArea();がDOM構築前に実行されてしまっています。 (そのときid="list1"の要素は無い) $(function() { $('#list1').addInputArea(); }); と変更することによりDOM構築後に実行されるのでプラグインが適用されるはずです。
お礼
回答ありがとうございます。 ご指摘のように、変更してみましたが、まだ動きません。 挿入場所も後ろに動かして、 $('#list1').addInputArea(); と $(function() { $('#list1').addInputArea(); }); を両方試しましたが、やはり、動きません。 引きつづき、教示お願いします。
お礼
何回も回答、ありがとうございます。 回答をいただき、ネット検索した結果、最新版は jquery.addInputArea.4.7.js のようなので、そちらをダウンロードして使用したところ、 動きました！！ 本当に、何回もありがとうございました。