非同期でページ遷移→遷移先のページでブラウザの戻るボタン→JavaScriptが効かない！

Thymeleafを使用したアプリケーション開発を勉強中です。

1.html↓

HTML
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4	<meta charset="UTF-8">
5	<title>1</title>
6</head>
7
8<body>
9	<header>ヘッダー</header>
10
11	<div class="main">
12		<div class="aaa">
13			<h1>1ページ</h1>
14			<button id="testButton">ボタン</button>
15		</div>
16	</div>
17
18	<footer>フッター</footer>
19
20	<script>
21		document.getElementById("testButton").addEventListener("click", (event) => {
22			console.log("testButtonが押されたよ");
23		});
24	</script>
25</body>
26</html>

2.html↓

HTML
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4	<meta charset="UTF-8">
5	<title>2</title>
6</head>
7
8<body>
9	<header>ヘッダー</header>
10
11	<div class="main">
12		<div class="aaa">
13			<h1>2ページ</h1>
14		</div>
15	</div>
16
17	<footer>フッター</footer>
18</body>
19</html>

1.htmlから非同期で2.htmlに画面遷移させます。
今回、画面遷移のきっかけの<a>や非同期に関するJSコードは省いてあるものとします。

<div class="main"></div>の中身を画面遷移によって書き換え、2.htmlとなり、その後、ブラウザの戻るボタンをクリックし、1.htmlに戻ります。そこで、<button id="testButton">ボタン</button>をクリックしてもコンソールには何も表示されません。画面遷移→遷移先のページ(2.html)でブラウザの戻るボタン→ 1.htmlにて、<button id="testButton">ボタン</button>をクリックすると、コンソールに「testButtonが押されたよ」と表示させる。この実現方法をどうか教えていただきたいです。

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

回答2件

どのようにして画面遷移をしているのか、コードが書かれていないため想像での回答になります。
非同期という記述がありますので、おそらくページ移動をせず、ヒストリー操作とDOM操作で画面の変更をしているのだと思います。
そしておそらく、2.htmlには #testButton が存在しないのではないでしょうか。
そうだとすると、1.htmlにあった #testButton はイベントごと削除されている可能性が高いかと思います。

以上の想像の前提での対処方法ですがいろいろ考えられます。

要素を削除しないでどこかに保持して、1.htmlに戻った時に復元する
1.html に戻った時に再度イベント設定する
デリゲートをする

それぞれ一長一短があると思いますが、個人的には2番目がわかりやすそうだな、とは思います。

投稿2024/04/12 00:46

Lhankor_Mhy

総合スコア36134

ttt

2024/04/12 20:33

コメントありがとうございます！正しく想像してくださっている通りの方法で作成しております。「1.html に戻った時に再度イベント設定する」とありますが、具体的な記述が分からず困惑しております。ご教授していただけますと幸いです。 window.addEventListener("popstate", () => { document.getElementById("testButton").addEventListener("click", (event) => { console.log("testButtonが押されたよ"); }); }); このようなこともしてみましたが上手くいかずでして、、、

Lhankor_Mhy

2024/04/13 00:34

window.addEventListener("popstate", () => { // DOM の再構築処理をした後に↓ document.getElementById("testButton").addEventListener("click", (event) => { console.log("testButtonが押されたよ"); }); }); ということですよね？　それであれば動作するはずなのですが……　ここに書かれていないことが原因かもしれません。もし、DOMの再構築と独立して実行しているならば、うまく要素を取れてないのかもしれません。コンソールに何かエラーは出ていませんか？　たとえば、Cannot read property 'addEventListener' of undefined みたいな。

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