teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問htmlに直書きしていたjavascriptコードを外部ファイルに設定したら、イベントが効く部分と効かない部分があるのを修正したい

Q&A

解決済

2回答

2069閲覧

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

obama
obama

総合スコア11

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2022/04/27 03:51

0

2

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

質問は、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);
	});
});

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

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

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

退会済みユーザー

退会済みユーザー

2022/04/27 03:55

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

2022/04/27 04:01

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

2022/04/27 04:25

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

2022/04/27 04:55

ご提示の「直書き」の方のコードを試してみましたが、エラーが出て動きませんでした。 おそらく、ご提示いただいていない部分が重要なのではないかと思います。
obama
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> <!--modal_date--> <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> <!--modal_date--> </fieldset> </div> </div> </form>
Lhankor_Mhy
Lhankor_Mhy

2022/04/27 06:25

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

2022/04/27 09:15

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

回答2件

0

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

投稿2022/04/27 04:08

yambejp
yambejp

総合スコア118268

obama
obama

2022/04/27 04:31

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

2022/04/27 04:36

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

2022/04/27 06:07

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

2022/04/27 08:50

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

2022/04/27 09:11

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

2022/04/27 09:18

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

2022/04/27 10:19

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

2022/04/28 04:35

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

0

自己解決

一応、解決できたのでご報告させていただきます。
動的に追加した要素だとイベントハンドラが登録されないとのことなので、要素そのものでなく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
obama

総合スコア11

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップJavaScriptに関する質問

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