JQUERYテーブルの1行目のテキストボックスでaddEventListenerは有効だが2行目は無効

前提・実現したいこと

【実現したいこと】
2行目のテキストボックスに数字を入力してリターンキーを押下すると、ボタンは活性表示する。

【手順】
1.プラスボタンを押下して、2行目を表示する。
2.2行目のテキストボックスに、適当な数字を入れてリターンキーを押下する。
【結果】
ボタンを活性表示したいが、非活性表示のままとなる。

【ソース】
animalpark.htmlと同じ階層にjsフォルダを作成して、フォルダ内に下記を置くと再現できます。
animalAreaTable.js、jquery-3.6.0.min.js

発生している問題・エラーメッセージ

JQUERYテーブルの一行目にテキストボックスがあります。テキストボックス内に数字を適当に入力してリターンキー押下すると、ボタンが活性状態になります。
しかし、2行目のテキストボックスで、1行目と同じ手順を実施してもボタンは非活性表示のままです。

該当のソースコード

html
1<!DOCTYPE html>
2<head>
3	<meta charset="utf-8"/>
4	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>動物園設定</title>
7 	<script src="./js/jquery-3.6.0.min.js"></script>
8  	<script src="./js/animalAreaTable.js"></script>
9</head>
10<body>
11	<div class="row">
12		<div class="panel">
13					<div class="form_aniCntrlArea">
14						<div class="aniCntrlLabel_border"></div>
15						<table id="aniCntrlArea-table">
16							<thead>
17								<tr>
18                                    <th>ab</th>
19                                    <th>cd</th>
20                                    <th>ef</th>
21                                    <th>gh</th>
22                                    <th>ij</th>
23                                    <th>kl</th>
24                                    <th></th>
25								</tr>
26							</thead>
27                            <tbody id="aniCntrlArea-tbody" style="border-top:2px #C7C7C7 solid;">
28                              <tr>
29                                <td width="50px">
30                                  <input id="aniPlus" value="+" type="button" class="aniAddList" onclick="aniClickPlus()">
31                                </td>
32                                <td width="50px">
33                                  <input id="aniMinus" value="-" type="button" class="aniRemoveList" onclick="aniClickMinus()">
34                                </td>
35                  			    <td width="100px">
36                  		  		  <input type="text" id="anithreshold" class="thresholdText" placeholder="" maxlength="6"> kW
37                  			    </td>
38                                <td width="150px">
39                                  <select id="startTimeList" class="aniCntrlTime" onclick="aniCntrlSetYes()"  tabindex="-1">
40                    				<option value="0">00</option>
41                                  </select>
42                                :00</td>
43                                <td align="left" width="150px">
44                                  <select id="endTimeList" class="aniCntrlTime" onclick="aniCntrlSetYes()" tabindex="-1">
45                    				<option value="0">00</option>
46                                  </select>
47                                :00</td>
48                                <td align="left" width="150px"><input id="boilNaumUnits" class="boilNum" value="" disabled align="left" width="1px"></td>
49                                <td width="400px"></td>
50                              </tr>
51                            </tbody>
52                        </table>
53                  		<button id="aniCntrlAreaSet" class="aniCntrlSetBtn"  onclick="aniClickSetApply()" disabled>AAAA</button>
54					</div>
55				</div>
56			</div>
57		</div>
58	</div>
59</body>
60

javascript
1$(document).ready(function() {
2
3	$(document).on('change', '.changeList', function() {
4	$(this)
5  		.parent()
6  		.next()
7  		.html($(this).val());
8	});
9
10	$(document).on('click', '.aniAddList', function() {
11		$('#aniCntrlArea-tbody>tr')
12			.eq(0)
13			.clone(true)
14			.insertAfter(
15		$(this)
16      		.parent()
17      		.parent(),
18		);
19		$("#aniCntrlArea-tbody tr").eq(0).children('td').eq(3).find(".aniCntrlTime").css("pointer-events", "auto");
20		$("#aniCntrlArea-tbody tr").eq(0).children('td').eq(5).find(".aniCntrlTime").css("pointer-events", "auto");
21	});
22
23});
24
25window.addEventListener('DOMContentLoaded', function() {
26
27	let anithreshold1Text = document.getElementById('anithreshold');
28	anithreshold1Text.addEventListener('change', aniandApplyAct);
29
30	//let anithreshold2Text = document.querySelectorAll('#anithreshold[type="text"]');
31	//anithreshold2Text.addEventListener('change', aniandApplyAct);
32
33}, false);
34
35function aniandApplyAct() {
36	document.getElementById("aniCntrlAreaSet").disabled = false;
37}
38
39

試したこと

下記コードが問題であることは分かっているのですが、どのように修正するべきか分かりませんでした。

javascript
1	let anithreshold2Text = document.querySelectorAll('#anithreshold[type="text"]');
2	anithreshold2Text.addEventListener('change', aniandApplyAct);

行動規範の内容に同意します

回答2件

コードがめちゃめちゃです

せっかく
<!DOCTYPE html>とHTML5の文書ですよと宣言してるのに、
widthやalignなどHTML5では推奨されない記述があるし、(style属性を使ってください)
onclickで存在しない関数を呼び出してたり、
onclickがあるのにjQueryで別のイベントハンドラが紐づいてたりしてます。

とりあえず、ちゃんと直したコードを提示しておきます。

一応動作確認はしてあります。
存在しない関数の呼び出し部分は全部捨てました、その上でjQueryのイベントハンドラで統一してあります。
ただ、changeListというクラスがHTMLの何処にも無かったため、このイベントハンドラだけは
手を付けていません。

＋で行が増えますし、ーでその行が削除されます。行の追加・削除でボタン有効化の条件を満たさなくなった場合はボタンを非活性に戻してます。
入力欄には数字しか受け付けないコードも追加してあります。

あと、行の要素にID属性が指定されていましたが、その行を丸ごとcloneしているせいで
HTML文書中はIDは一意でなくてはならないという前提が崩れてしまっているので、IDの指定は捨てました。
代わりにクラス名で組んであります。

完成したコード

animalpark.html

html
1<!DOCTYPE html>
2<head>
3    <meta charset="utf-8">
4    <meta http-equiv="X-UA-Compatible" content="IE=edge">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>動物園設定</title>
7    <script src="./js/jquery-3.6.0.min.js"></script>
8    <script src="./js/animalAreaTable.js"></script>
9</head>
10<body>
11    <div class="row">
12        <div class="panel">
13                    <div class="form_aniCntrlArea">
14                        <div class="aniCntrlLabel_border"></div>
15                        <table id="aniCntrlArea-table">
16                            <thead>
17                                <tr>
18                                    <th>ab</th>
19                                    <th>cd</th>
20                                    <th>ef</th>
21                                    <th>gh</th>
22                                    <th>ij</th>
23                                    <th>kl</th>
24                                    <th></th>
25                                </tr>
26                            </thead>
27                            <tbody id="aniCntrlArea-tbody" style="border-top:2px #C7C7C7 solid;">
28                              <tr>
29                                <td style="width:50px;">
30                                  <input value="+" type="button" class="aniAddList">
31                                </td>
32                                <td style="width:50px;">
33                                  <input value="-" type="button" class="aniRemoveList">
34                                </td>
35                                <td style="width:100px;">
36                                      <input type="text" class="thresholdText" placeholder="6桁までの数字を入力" maxlength="6"> kW
37                                </td>
38                                <td style="width:150px;">
39                                  <select class="aniCntrlTime" tabindex="-1">
40                                    <option value="0">00</option>
41                                  </select>
42                                :00
43                                </td>
44                                <td style="width:150px;text-align:left;">
45                                  <select class="aniCntrlTime" tabindex="-1">
46                                    <option value="0">00</option>
47                                  </select>
48                                :00
49                                </td>
50                                <td style="width:150px;text-align:left;">
51                                  <input class="boilNum" value="" disabled="disabled">
52                                </td>
53                                <td width="400px">
54                                </td>
55                              </tr>
56                            </tbody>
57                        </table>
58                        <button id="aniCntrlAreaSet" class="aniCntrlSetBtn" disabled="disabled">AAAA</button>
59                    </div>
60                </div>
61            </div>
62        </div>
63    </div>
64</body>

animalAreaTable.js

javascript
1$(window).on('load', function() { //https://qiita.com/sukoyakarizumu/items/d07288a3fa67e19b66de　参照
2                                     //readyだと画像などの読み込みを待たずに発火する。
3                                     //確実にdocumentが読み込まれたタイミングを知るにはloadの発火を待つこと
4                                     //ただしjQuery 3.xからは、.loadは廃止され.onでloadを待つ書き方に変わりました
5                                     //https://yachin29.hatenablog.com/entry/2017/06/22/115328
6
7    function thresholdText_handler(e, that) {
8        let thresholdTextCollection = $('.thresholdText');
9        let thresholdTextCollection_length = thresholdTextCollection.length;
10        let activeFlag = false;
11        for (let i=0; i<thresholdTextCollection_length; i++) {
12            if (thresholdTextCollection.eq(i).val() !== "") {
13                activeFlag = true;
14                break;
15            }
16        }
17
18        if (activeFlag === true) {
19            $("#aniCntrlAreaSet").prop("disabled", false);
20        } else {
21            $("#aniCntrlAreaSet").prop("disabled", true);
22        }
23    };
24
25    $(document).on('keydown', '.thresholdText', function(e){
26        let k = e.keyCode;
27        let str = String.fromCharCode(k);
28        if(!(str.match(/[0-9]/) || (37 <= k && k <= 40) || (96 <= k && k <= 105) || k === 8 || k === 46 || k === 13)){
29            return false;
30        }
31    });
32    
33    $(document).on('keyup', '.thresholdText', function(e){
34        this.value = this.value.replace(/[^0-9]+/i,'');
35        thresholdText_handler(e, this);
36    });
37    
38    $(document).on('blur', '.thresholdText',function(){
39        this.value = this.value.replace(/[^0-9]+/i,'');
40        thresholdText_handler(e, this);
41    });
42
43    $(document).on('change', '.thresholdText', function(e){ thresholdText_handler(e, this) });
44    
45    $(document).on('change', '.changeList', function() {
46        $(this)
47            .parent()
48            .next()
49            .html($(this).val());
50    });
51
52    $(document).on('click', '.aniAddList', function() {
53        // > セレクタの前後には半角スペースを入れてください。分かりにくいです。
54        // http://weboook.blog22.fc2.com/blog-entry-268.html
55        let cloneElement = $('#aniCntrlArea-tbody > tr').eq(0).clone(true);
56        cloneElement.children('td').eq(2).children('input').val("");
57        cloneElement
58            .insertAfter(
59                $(this)
60                    .parent()
61                    .parent()
62            );
63        $("#aniCntrlArea-tbody tr").eq(0).children('td').eq(3).find(".aniCntrlTime").css("pointer-events", "auto");
64        $("#aniCntrlArea-tbody tr").eq(0).children('td').eq(5).find(".aniCntrlTime").css("pointer-events", "auto");
65    });
66
67    $(document).on('click', '.aniRemoveList', function(e) {
68        let removeTarget = $('#aniCntrlArea-tbody tr');
69        let removeTarget_length = removeTarget.length;
70        if (removeTarget_length > 1) {
71            $(this).parent().parent().remove();
72        }
73        thresholdText_handler(e, this);
74    });
75});
76

コードブロックの右上のアイコンをクリックするとコード全体をコピーできるので、ご自分の環境に張り付けて、動作確認してみてください。

投稿2021/07/15 17:32

編集2021/07/16 01:19

nekora

総合スコア501

nekora

2021/07/15 17:33

回答が役になったなら回答の横の数字をポイントすると回答の評価の増減ができます。また解決につながった回答はベストアンサーに指定できます。この設定は個別に指定できます。

garou

2021/07/16 01:58

nekora様ご回答ありがとうございました。綺麗にコードを記載頂きありがとうございます。参考のURLも貼って頂いておりますので、熟読させて頂きます。私が投稿したコードは意図的に崩しておりますが、nekora様のコードを参考にさせて頂きます。

行動規範の内容に同意します

ベストアンサー

なにやらjQueryと普通のjavascriptが入り混じったコードが提示されていますが、タイトルとタグにjQueryとあるのでjQueryで実現する方法を回答します。

javascript
1$(function() {
2  $(document).on('change', '.thresholdText', aniandApplyAct);
3});

投稿2021/07/15 09:55

ku__ra__ge

総合スコア4524

garou

2021/07/16 01:55

ku__ra__ge様ご回答ありがとうございました。問題を解決することが出来ました。 JQUERYで書いた部分は、出来るだけJQUERYだけで実装した方が良いと理解しました。私はhtmlの駆け出しで苦戦しております。ご教示ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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