入力欄を動的に増減させる

解決済

質問者：iruiru298
質問日時：2014/07/12 21:02
回答数：3件

jquery.addInputAreaAdd Starhundret
プログラミング, jQueryプラグイン
の基本の入力欄を動的に増減させるデモ用のHTMLファイルを作りましたが、
入力欄が増減できません。
http://d.hatena.ne.jp/sutara_lumpur/20120509/133 …

どこの記載が間違っているのでしょうか。

<html lang="ja-JP">
<head>
<script type="text/javascript src="http://code.jquery.com/jquery-1.9.1.min.js"></sc …

<script type="text/javascript">
$('#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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： LancerVII
回答日時：2014/07/15 08:10

こんにちは。

プラグインを利用する際はそのjsを別途読み込む必要があります。

さて、提示いただいたソースで試すとこちらの環境では動いているように見受けられます。

１．textボックスとaddボタンが表示されている
２．Addボタンを押下すると2つめのtextボックスが表示、さらに1番目と2番目のtextボックスの横にDeleteボタンが表示される
３．Deleteボタンを押下するとその行のtextボックスが削除される

IE11,GoogleChromeで確認しています。

開発者ツールでエラー等が出てないか見てみてください。

- 0
- 件

通報する

この回答へのお礼

何回も回答、ありがとうございます。

回答をいただき、ネット検索した結果、最新版は
　jquery.addInputArea.4.7.js
のようなので、そちらをダウンロードして使用したところ、
動きました！！

本当に、何回もありがとうございました。

通報する

お礼日時：2014/07/15 18:23

No.2

回答者： LancerVII
回答日時：2014/07/14 20:57

こんにちは。

ソースをみる限りではjq本体しか読み込んでいませんが、プラグインのjsは読み込んでいますか？

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

＞プラグインの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>

通報する

お礼日時：2014/07/15 07:30

No.1

回答者： LancerVII
回答日時：2014/07/14 12:04

こんにちは。

$('#list1').addInputArea();がDOM構築前に実行されてしまっています。
(そのときid="list1"の要素は無い)

$(function() {
$('#list1').addInputArea();
});
と変更することによりDOM構築後に実行されるのでプラグインが適用されるはずです。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

ご指摘のように、変更してみましたが、まだ動きません。
挿入場所も後ろに動かして、
$('#list1').addInputArea();
と
$(function() {
$('#list1').addInputArea();
});
を両方試しましたが、やはり、動きません。
引きつづき、教示お願いします。

通報する

お礼日時：2014/07/14 20:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！