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

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

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

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

Q&A

解決済

1回答

1771閲覧

Cloneで追加したテーブル行にもイベントを実装したい

test1234

総合スコア8

JavaScript

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

0グッド

0クリップ

投稿2021/06/11 04:20

Cloneで追加したテーブル行にも、インプットcodeのフォーカスを外すとnameにcodeに入力した内容を反映するよう実装したいです。
下記「試したこと」ですと、1行目は問題ないのですが、自動的に追加された2行目以降にイベントが付与されません。
ご教示お願い致します。

・試したこと

javascript

1 var strPass = document.getElementById('code_in').value;  //IDセレクタcode_inの値を取得 2 document.getElementById('name_in').value = strPass; //IDセレクタname_inにcode_inの値を反映

javascript

1function allCheck(a) { 2  // 行を追加 3  $('#table tbody tr:last-child').clone(true).appendTo('#table tbody'); 4 5  //インプットcodeに入力した内容をフォーカスを外すとnameにも同じ内容を反映したい 6 var strPass = document.getElementById('code_in').value;  //IDセレクタcode_inの値を取得 7 document.getElementById('name_in').value = strPass; //IDセレクタname_inにcode_inの値を反映 8 9}

php

1<table id='table'> 2<tbody> 3<tr> 4<td><input name='code' type='text' id='code_in' value = '' onBlur='allCheck(this)' /></td> 5<td><input name='name' type='text' id='name_in' value = '' /></td> 6</tr> 7</tbody> 8</table>

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

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

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

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

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

FKM

2021/06/11 05:53

普通に問題なく動いているようですが…。ブラウザ環境は何ですか?
test1234

2021/06/11 05:56

chrome 91.0 です。
guest

回答1

0

ベストアンサー

jsとjQueryがごっちゃになってるので整理しましょう。イベントトリガーはjsなのに
関数の中身でjQueryを使ったりしています。

あと、idは単一エレメントのみ指定するものなので、この場合はクラスの方が適切です。

js

1<tbody> 2<tr> 3<td><input name='code' type='text' class='code_in' value = '' /></td> 4<td><input name='name' type='text' class='name_in' value = '' /></td> 5</tr> 6</tbody> 7</table> 8 <script> 9var strPass = $('.code_in:first').val();  //クラスセレクタcode_inの値を取得 10 $('.name_in').val(strPass); 11 $(document).on("blur",'.code_in',function(){ 12   // 行を追加 13   $('#table tbody tr:last-child').clone(true).appendTo('#table tbody'); 14 15   //インプットcodeに入力した内容をフォーカスを外すとnameにも同じ内容を反映したい 16 var strPass = $(this).val(); // クラスセレクタcode_inの値を取得 17 $(this).parents('tr').find('.name_in').val(strPass); //次のクラスに対し、値を付与していく 18 }) 19</script> 20 21</body>

上の方法なら、クローンされたエレメントに対してもイベント適用ができますが、このような動きで間違いないでしょうか。

投稿2021/06/11 06:11

編集2021/06/11 06:14
FKM

総合スコア3633

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

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

test1234

2021/06/11 06:28

下記が効かないです。 $(document).on('blur','.code_in',function(){
FKM

2021/06/11 06:37

idをクラスに変えてますか?
test1234

2021/06/11 06:41

はい、変更しています。下記は問題なく実装できています。 var strPass = $('.code_in:first').val();  //クラスセレクタcode_inの値を取得 $('.name_in').val(strPass);
test1234

2021/06/11 06:55

申し訳ありません。一つ書き間違えていました!できました!ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問