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

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

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

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

jQuery

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

Q&A

解決済

1回答

2465閲覧

フォーム要素を複製するjQueryのコードについて

matometaru

総合スコア43

JavaScript

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

jQuery

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

1グッド

0クリップ

投稿2015/10/18 16:21

お世話になっております。

フォームを複製する以下のコードについて質問があります。
現在のコードでは.trigger('adjustName');が実行されず、nameに対して固有の名前がつけれません。

何が原因かわからないですが、$('.repair [name]').live〜以降が実行されていません。

$('.repair').live〜に変更すると実行はされるのですが、意図した動作ではありません。

質問:$('.repair [name]')の箇所をどう書けばいいのでしょうか。

よろしくお願いします。

html

1 2<tr class="repair template"> 3 <th>dummy</th> 4 <td> 5 <div class="repairBox"> 6 <p class="repair01"><span class="prefix">修理:</span><select name="part" class="part"><option value="選択してください">選択してください</option><option value="部位1">部位1</option><option value="部位2">部位2</option></select></p> 7 </td> 8</tr> 9<tr class="btnTr"> 10 <th></th> 11 <td> 12 <p id="addBtn">追加する</p> 13 <!-- /.btn --> 14 </td> 15</tr>

javascript

1if($("#addBtn").length) { 2 $("#addBtn").on('click', function() { 3 var repairItem = $('<tr>') 4 .addClass('repair') 5 .insertBefore("#orderTable .btnTr") 6 .data('suffix','.'+(repairCount++)); 7 $("#orderTable .repair.template") 8 .children() 9 .clone().appendTo(repairItem) 10 .trigger('adjustName'); 11 12 13 }); 14 15 $('.repair [name]').live('adjustName',function(){ 16 var suffix = $(this).closest('.repair').data('suffix'); 17 if (/(\w)+\.(\d)+$/.test($(this).attr('name'))) return; 18 $(this).attr('name',$(this).attr('name')+suffix); 19 }); 20 21}
cat0138👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

質問:$('.repair [name]')の箇所をどう書けばいいのでしょうか。

この箇所の書き方自体は(nameがundefinedになりそうですが)このままで動作すると思います。
イベントがキックされないのはターゲットがずれているせいです。
ただ、ユニークネームを付けるのに、追加してからイベントで変更という手順は迂遠に思えます。
追加時以外にこのイベントハンドラに使い道が無いなら、ネーミングは別の方法を検討したほうがいいかも知れません。
こんな感じで(functionの部分は適当です)

javascript

1$(function(){ 2 var repairCount = 1; 3 if($("#addBtn").length) { 4 $("#addBtn").on('click', function() { 5 repairCount++; 6 var r = $("#orderTable .repair.template").clone() 7 r.removeClass('template'); 8 r.find('[name]').attr('name',function(){return 'part'+repairCount;}); 9 r.insertBefore("#orderTable .btnTr"); 10 }); 11 } 12});

triggerが実行されない理由ですが、ターゲットが新規に作成するtrのchildrenだからだと思います。
childrenは直下の要素にしかアクセスしないので、この場合はthとtdにadjustNameを発行しています。

  1. thとtdの色だけ変わる

javascript

1 $("#orderTable .repair.template") 2 .children() 3 .clone().appendTo(repairItem) 4 .css('color','red')
  1. selectの色が変わり、新規追加のselectにadjustNameが発行される。(1.8以前)

ただこの場合、nameはtrにセットされる気がします。

javascript

1 $("#orderTable .repair.template") 2 .children() 3 .clone().appendTo(repairItem) 4 .find('[name]').css('color','red').trigger('adjustName');

また1.9以降ではliveは廃止されていれerrorになるうえ、代替の.on()を使ってもこのコードでは多分triggerが実行されません。

投稿2015/10/18 20:38

編集2015/10/18 21:06
hirohiro

総合スコア2068

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問