htmlに直書きしていたjavascriptコードを外部ファイルに設定したら、イベントが効く部分と効かない部分があるのを修正したい

初めて利用させていただいております。

質問は、htmlに直書きしていたモーダルウィンドウのボタンとjavascriptを外部ファイルとして設置すると、直書きしていた場合に動いてたイベント（ボタンをクリックするとテキストエリアに数字が表示される）ものが、表示される時と表示されない時がある為、常に表示されるようにしたいです。
javascriptの実行タイミングの問題なのではないかと考えているのですが、ご教示頂ければ幸いです。
何卒、宜しくお願い致します。

以下は直書きしてるhtmlです

<!DOCTYPE html>
<html lang="jp">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="temp/common/smart/css/form_mw.css">
	<script>
		$(function () {
			$("#mwd").load("modal_window_days.html");
		});
	</script>
	<title></title>

</head>

<body>
	<form>
		<div class="form_wrapper">
			<div class="form_container">
				<fieldset class="form_sex">
					//省略
					<!--modal_date-->
					<div class="modal js_modal_m">
						<div class="modal_bg js_modal_close"></div>
						<div class="modal_content">
							<ul id="time">
								//省略
							</ul>
							<a class="js_modal_close btn_close" href="">閉じる</a>
						</div>
					</div>
					<div class="modal js_modal_d">
						<div class="modal_bg js_modal_close"></div>
						<div class="modal_content">
							<ul id="time">
								//省略
							</ul>
							<a class="js_modal_close btn_close" href="">閉じる</a>
						</div>
					</div>
					<!--modal_date-->
				</fieldset>
			</div>
		</div>
	</form>

	<script>
		$(function () {
			$('.js_modal_open_m').on('click', function () {
				$('.js_modal_m').fadeIn();
				return false;
			});
		});
		$(function () {
			$('.js_modal_open_d').on('click', function () {
				$('.js_modal_d').fadeIn();
				return false;
			});
		});
		$(function () {
			$('.js_modal_close').on('click', function () {
				$('.js_modal_m,.js_modal_d').fadeOut();
				return false;
			});
		});
	</script>
	<script>
		(function () {
			var time = new Date();
			var seireki = time.getFullYear();
			for (var i = 1900; i <= seireki; i++) {
				$("#year").get(0).options[i - 1899] = new Option(i);
			}
		}());
	</script>
	<script>
		$(function () {
			$('#time li.btn_month').click(function () {
				var index = $(this).index() + 1;
				$('.month_area').val(index);
			});
		});
	</script>
	<script>
		$(function () {
			$('#time li.btn_day').click(function () {
				var index = $(this).index() + 1;
				$('.date_area').val(index);
			});
		});
	</script>


	<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
		crossorigin="anonymous"></script>
	<script type="text/javascript" src="./temp/common/smart/js/maodal_time.js"></script>
</body>

</html>

以下は外部にjavascriptを設置したhtmlになります。

<!DOCTYPE html>
<html lang="jp">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="temp/common/smart/css/form_mw.css">




	<title>y_20220204</title>

</head>

<body>
	<form>
		<div class="form_wrapper">
			<div class="form_container">
				//省略
					<div id="mwd"></div>
				</fieldset>
			</div>
		</div>
	</form>

	<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
		crossorigin="anonymous"></script>


	<script>
		$(function () {
			$("#mwd").load("modal_window_days.html");
		});
	</script>
	<script type="text/javascript" src="./temp/common/smart/js/maodal_time.js"></script>




</body>

</html>

以下は外部に設置したjavascriptです。

'use strict';
//モーダル 呼び出し
		var xhr = new XMLHttpRequest(),
			method = "GET",
			url = "modal_window_days.html";
		var mwd = document.getElementById("mwd");
		xhr.open(method, url, true);
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4 && xhr.status === 200) {
				var modal = xhr.responseText; //String型で取得
				mwd.innerHTML = modal; //完了
			}
		};
		xhr.send();




//モーダル 要素の動き

$(function () {
	$('.js_modal_open_m').on('click', function () {
		$('.js_modal_m').fadeIn();
		return false;
	});
});
$(function () {
	$('.js_modal_open_d').on('click', function () {
		$('.js_modal_d').fadeIn();
		return false;
	});
});


(function () {
	var time = new Date();
	var seireki = time.getFullYear();
	for (var i = 1900; i <= seireki; i++) {
		$("#year").get(0).options[i - 1899] = new Option(i);
	}
}());

$(function () {
	$('.js_modal_close').on('click', function () {
		$('.js_modal_m,.js_modal_d').fadeOut();
		return false;
	});
});

$(function () {
	$('#time li.btn_month').on('click', function () {
		var index = $(this).index() + 1;
		$('.month_area').val(index);
	});
});

$(function () {
	$('#time li.btn_day').on('click', function () {
		var index = $(this).index() + 1;
		$('.date_area').val(index);
	});
});

退会済みユーザー

2022/04/27 03:55

> 表示される時と表示されない時がある為、ということは問題を 100% 再現できる手順が無い（もしくは見つかってない）ということですか？

int32_t

2022/04/27 04:01

ブラウザの開発者ツールのコンソールになにかエラーが出ていますか?

obama

2022/04/27 04:25

早速のご回答、恐れ入ります。 SurferOnWww 様仰る通り、問題を 100% 再現できる手順が無い（もしくは見つかってない）状態です int32_t 様開発者ツールのコンソールには該当のエラーはなく、イベントリスナーにはclickイベントが表示される時と表示されないことがあります。

Lhankor_Mhy

2022/04/27 04:55

ご提示の「直書き」の方のコードを試してみましたが、エラーが出て動きませんでした。おそらく、ご提示いただいていない部分が重要なのではないかと思います。

obama

2022/04/27 06:23

Lhankor_Mhy 様お世話になっております。以下、省略部分のhtmlになります <form> <div class="form_wrapper"> <div class="form_container"> <fieldset class="form_sex"> <img src="img/ttl_sex.png" alt=""> <div class="form_sex_icon"> <p><img src="img/sex-m.png" alt="男"></p> <p><img src="img/sex-f.png" alt="女"></p> </div> </fieldset> <fieldset class="form_bd"> <select name="b_y" id="year"> <option value="1">--西暦--</option> </select> 年 <input type="text" name="b_m" value="" class="month_area js_modal_open_m" readonly> 月 <input type="text" name="b_d" value="" class="date_area js_modal_open_d" readonly> 日 <div class="content"> <a class="js_modal_open" href="">modal</a> </div>  <div class="modal js_modal_m"> <div class="modal_bg js_modal_close"></div> <div class="modal_content"> <ul id="time"> <li class="js_modal_close btn_month"><a href="#">1月</a></li> <li class="js_modal_close btn_month"><a href="#">2月</a></li> <li class="js_modal_close btn_month"><a href="#">3月</a></li> <li class="js_modal_close btn_month"><a href="#">4月</a></li> <li class="js_modal_close btn_month"><a href="#">5月</a></li> <li class="js_modal_close btn_month"><a href="#">6月</a></li> <li class="js_modal_close btn_month"><a href="#">7月</a></li> <li class="js_modal_close btn_month"><a href="#">8月</a></li> <li class="js_modal_close btn_month"><a href="#">9月</a></li> <li class="js_modal_close btn_month"><a href="#">10月</a></li> <li class="js_modal_close btn_month"><a href="#">11月</a></li> <li class="js_modal_close btn_month"><a href="#">12月</a></li> </ul> <a class="js_modal_close btn_close" href="">閉じる</a> </div> </div> <div class="modal js_modal_d"> <div class="modal_bg js_modal_close"></div> <div class="modal_content"> <ul id="time"> <li class="js_modal_close btn_day"><a href="#">1日</a></li> <li class="js_modal_close btn_day"><a href="#">2日</a></li> <li class="js_modal_close btn_day"><a href="#">3日</a></li> <li class="js_modal_close btn_day"><a href="#">4日</a></li> <li class="js_modal_close btn_day"><a href="#">5日</a></li> <li class="js_modal_close btn_day"><a href="#">6日</a></li> <li class="js_modal_close btn_day"><a href="#">7日</a></li> <li class="js_modal_close btn_day"><a href="#">8日</a></li> <li class="js_modal_close btn_day"><a href="#">9日</a></li> <li class="js_modal_close btn_day"><a href="#">10日</a></li> <li class="js_modal_close btn_day"><a href="#">11日</a></li> <li class="js_modal_close btn_day"><a href="#">12日</a></li> <li class="js_modal_close btn_day"><a href="#">13日</a></li> <li class="js_modal_close btn_day"><a href="#">14日</a></li> <li class="js_modal_close btn_day"><a href="#">15日</a></li> <li class="js_modal_close btn_day"><a href="#">16日</a></li> <li class="js_modal_close btn_day"><a href="#">17日</a></li> <li class="js_modal_close btn_day"><a href="#">18日</a></li> <li class="js_modal_close btn_day"><a href="#">19日</a></li> <li class="js_modal_close btn_day"><a href="#">20日</a></li> <li class="js_modal_close btn_day"><a href="#">21日</a></li> <li class="js_modal_close btn_day"><a href="#">22日</a></li> <li class="js_modal_close btn_day"><a href="#">23日</a></li> <li class="js_modal_close btn_day"><a href="#">24日</a></li> <li class="js_modal_close btn_day"><a href="#">25日</a></li> <li class="js_modal_close btn_day"><a href="#">26日</a></li> <li class="js_modal_close btn_day"><a href="#">27日</a></li> <li class="js_modal_close btn_day"><a href="#">28日</a></li> <li class="js_modal_close btn_day"><a href="#">29日</a></li> <li class="js_modal_close btn_day"><a href="#">30日</a></li> <li class="js_modal_close btn_day"><a href="#">31日</a></li> </ul> <a class="js_modal_close btn_close" href="">閉じる</a> </div> </div>  </fieldset> </div> </div> </form>

Lhankor_Mhy

2022/04/27 06:25

やはりエラーが出ます。おそらく、実際のコードと異なる部分が重要なのだと思います。

obama

2022/04/27 09:15

Lhankor_Mhy 様ご確認、ありがとうございます。再度、修正検討したいと思います

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

回答2件

jQueryのライブラリはHTMLのなるべく先頭の方に組み込んでください

投稿2022/04/27 04:08

yambejp

総合スコア118164

obama

2022/04/27 04:31

早速のご回答、恐れいります。ご指示いただいた通りjQueryのライブラリをHTMLの先頭に設置を試してみましたが、モーダルウィンドウが表示されなくなりました。 jQueryのライブラリを外javascriptに設置する場合でも、同様に設置すればよろしいでしょうか。

yambejp

2022/04/27 04:36

不確定な要素が多すぎてなんとも言えません。 XHRの直書きもあまりに古い書き方なのでfetchなどに置き換えるべきですどこかソースを動作可能なサイトにアップした方が回答はしやすいと思います

obama

2022/04/27 06:07

yambejp 様ご回答をありがとうございます。 XHRが古い記述すら知らずコピーして使っておりました。fetchを調べさせていただきます。また一度ソースをアップして再度、ご質問させていただきたい思います。

obama

2022/04/27 08:47

こちらがjavascriptを直書きしたもの http://illustdrops.html.xdomain.jp/index.html こちらがjavascriptを外部ファイルにしたものになります http://illustdrops.html.xdomain.jp/index2.html

yambejp

2022/04/27 08:50

月や日を選ばせる部分のモーダルの話ということでよろしいですね？外部jsだと選んでもテキストボックスに値が引き継がれないということ？

obama

2022/04/27 09:11

＞月や日を選ばせる部分のモーダルの話ということでよろしいですね？説明不足で申し訳ありません。月と日のモーダル部分のことです。＞外部jsだと選んでもテキストボックスに値が引き継がれないということ？仰る通り、テキストボックスに値が引き継がれないです。ただ、何かのタイミングで値が引き継がれテキストボックスに表示されることがあります。

yambejp

2022/04/27 09:18

とりあえずidが競合しているのを直したほうがよいですね

obama

2022/04/27 10:19

ありがとうございます。まずIDの見直しを致します。

obama

2022/04/28 04:35

yambejp 様ありがとうございました。今回、新たにfetch() メソッドを学ぶ機会が出来ました。 IDの方も修正致しました。

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

自己解決

一応、解決できたのでご報告させていただきます。
動的に追加した要素だとイベントハンドラが登録されないとのことなので、要素そのものでなくdocument全体でイベントを受け取れられるように修正しました。
コメントを下さった皆様、ありがとうございました。

【修正前】
$(function () {
	$('.js_modal_close').on('click', function () {
		$('.js_modal_m,.js_modal_d').fadeOut();
		return false;
	});
});

$(function () {
	$('#time li.btn_month').on('click', function () {
		var index = $(this).index() + 1;
		$('.month_area').val(index);
	});
});

$(function () {
	$('#time li.btn_day').on('click', function () {
		var index = $(this).index() + 1;
		$('.date_area').val(index);
	});
});

【修正後】
$(function () {
	$(document).on('click','.js_modal_close', function () {
		$('.js_modal_m,.js_modal_d').fadeOut();
		return false;
	});
});

$(function () {
	$(document).on('click','#time li.btn_month', function () {
		var index = $(this).index() + 1;
		$('.month_area').val(index);
	});
});

$(function () {
	$(document).on('click','#time li.btn_day', function () {
		var index = $(this).index() + 1;
		$('.date_area').val(index);
	});
});

[参考]https://pisuke-code.com/jquery-solution-for-event-unfired/

投稿2022/04/28 04:38

obama

総合スコア11