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>
No.3ベストアンサー
- 回答日時:
こんにちは。
プラグインを利用する際はそのjsを別途読み込む必要があります。
さて、提示いただいたソースで試すとこちらの環境では動いているように見受けられます。
1.textボックスとaddボタンが表示されている
2.Addボタンを押下すると2つめのtextボックスが表示、さらに1番目と2番目のtextボックスの横にDeleteボタンが表示される
3.Deleteボタンを押下するとその行のtextボックスが削除される
IE11,GoogleChromeで確認しています。
開発者ツールでエラー等が出てないか見てみてください。
何回も回答、ありがとうございます。
回答をいただき、ネット検索した結果、最新版は
jquery.addInputArea.4.7.js
のようなので、そちらをダウンロードして使用したところ、
動きました!!
本当に、何回もありがとうございました。
No.2
- 回答日時:
こんにちは。
ソースをみる限りでは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>
No.1
- 回答日時:
こんにちは。
$('#list1').addInputArea();がDOM構築前に実行されてしまっています。
(そのときid="list1"の要素は無い)
$(function() {
$('#list1').addInputArea();
});
と変更することによりDOM構築後に実行されるのでプラグインが適用されるはずです。
回答ありがとうございます。
ご指摘のように、変更してみましたが、まだ動きません。
挿入場所も後ろに動かして、
$('#list1').addInputArea();
と
$(function() {
$('#list1').addInputArea();
});
を両方試しましたが、やはり、動きません。
引きつづき、教示お願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLファイル同士での値渡し
-
テキストエリアに履歴を残したい
-
改行コード変換しても、引数の...
-
子ウィンドウを閉じるとき、親...
-
残り時間カウントダウン表示 ...
-
指定時間からの経過時間をリア...
-
プルダウンで選択された値を別...
-
テキストボックスに入力した色...
-
JavaScriptからphp関数の呼び出し
-
フォームのPOSTデータをサブウ...
-
ページ間で変数を保持したい
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
<JavaScript>tableタグを入力不...
-
Selectボックスの幅を自動で広...
-
hiddenのvalueの値を変えたい
-
ラジオボタンにタブインデック...
-
value内に変数を入れたい
-
一覧から選択した行の行番号を...
-
【jQuery】input nameの文字列...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TextBoxに半角数字以外を入れた...
-
ページ間で変数を保持したい
-
HTMLファイル同士での値渡し
-
tabindexの取得
-
プルダウンで選択された値を別...
-
マイナスなら赤字で表示したい...
-
フォームの内容でリンク先URLの...
-
テキストエリアに履歴を残したい
-
テキストボックスに入力した色...
-
イベント発生順序
-
どちらかひとつのテキストボッ...
-
HTMLとJavaScriptで作った表示...
-
VBSからjavascript
-
GetElementByIdがうまく取得で...
-
大文字か小文字かを判断する方法
-
JSPでonChangeを強制発行するに...
-
VBScriptでpingを実行(ブラウザ...
-
javascriptのちょっとした動作...
-
VBscriptの配列変数をJavascrip...
-
画像の表示非表示について質問です
おすすめ情報