誰も回答がないので、敢えて回答しておきます。
ここまでは良いのですが、EJS1に戻ってきた際にEJS2でキー判定に使ったコードが有効になっているままで、
何かキーを押すとEJS1が表示し直されてしまいます。
これは$(document).keydown()
だからだと思います。このイベントはbodyではなく、その上位のdocumentに対してなので、bodyの書き換えでは消えません。なので、EJS1に戻ってもイベントハンドラが有効なままなのです。
また、その状態でEJS2を再び表示するとletで宣言した変数countが
既に宣言されている(HTMLが2回読まれている(?))というエラーが出ます。
一度目の表示で、(恐らく)letでグローバル定義されたcountがあるので、これが残ります。次にまた(恐らく)グローバル定義されたものが読まれても、これは重複してしてしまうのでエラーです。
以上から、
- documentに対するkeydownイベントのハンドラ解除
- グローバル変数でないcountの定義
をしたものを書いてみました。Ajaxのままでは実行も出来ないので、setTimeoutにして流し込むHTMLをグローバルの文字列にしています。ハイライトが不自然になってますが、やってることがやってることなので仕方ないと諦めてください。
HTML
1<html>
2<head>
3<script src="jquery-3.3.1.min.js"></script>
4<script>
5 data1 = "\
6<div><h1>ESJ1</h1></div>\
7<script>\
8(function(){\
9 let result = confirm('本当に移動しますか?');\
10 if (result) {\
11 setTimeout(function(){\
12 $('body').html(data2);\
13 }, 1);\
14 }\
15})();\
16</" + "script>\
17 ";
18 data2 = "\
19<div><h1>ESJ2</h1></div>\
20<script>\
21(function(){\
22 let count = 0;\
23 $(document).on('keydown', () =>{\
24 $(document).off('keydown');\
25 count++;\
26 setTimeout(function(){\
27 $('body').html(data1);\
28 }, 1);\
29 });\
30})();\
31</" + "script>\
32 ";
33</script>
34</head>
35<body>
36<script>
37$('body').html(data1);
38</script>
39</body>
40</html>
正直なところ、言いたいことはいろいろありますが、どうしてこんなコードになっているのか、理由も分からないので、1つだけ絶対言っていた方がいいことだけ言っておきます。
スクリプトを流し込むのは止めた方がいいです。
よく分からないうちは危ないので。
■追記-1
ご指摘があったので、きちんと書いておきます。
今回サンプルで書いたものは、埋め込んだグローバル変数の内容を使っていますが、これはサンプルコードをサーバーなしで動かせるように、本来Ajaxから受け取るはずのデータを書いたものです。なので、この質問者さんの環境でサンプルコードをそのまま使用することはできません。回答そのものは自分で考えて欲しいということもあり、実際の修正内容を載せていなかったのですが、ご指摘で懸念されているように、よく分からずこのまま使用するというのはさらに良くないので、私のサンプルを実際に適用した回答を併記することにしました。
JavaScript
1// EJS1
2(function(){
3 let result = confirm('本当に移動しますか?');
4 if (result) {
5 $.ajax({
6 type:"GET",
7 url:"Page1",
8 dataType:"html",
9 success: function(data){
10 $('body').html(data);
11 }
12 });
13 }
14})();
JavaScript
1// EJS2
2(function(){
3 let count = 0;
4 $(document).on('keydown', () =>{
5 $(document).off('keydown');
6 count++;
7 $.ajax({
8 type:"GET",
9 url:"helo",
10 dataType:"html",
11 success:function(data){
12 $('body').html(data);
13 }
14 });
15})();
なお、このコードは、動くようにした(つもり)のものというだけなので、スクリプトの流し込みはそのままの想定になっており、良くないです。ご自分で考えて頂いて、<script>〜</script>要素をAjaxで流し込むのは止めましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/02 10:42