ブラウザで一度前のページに戻るとJavaScriptが効かない

JavaScriptを使って画像をクリックすると画面いっぱいに画像を拡大表示するコードなのですが、一度他のページに移動してブラウザの戻るボタンで再度同じページに戻って来て画像をクリックしても画像が拡大表示されずJavaScriptが効いていない状態になってしまいます。（再読み込みボタンで再読込するとJavaScriptが効くようになる）

一応コンソールログには以下のように出たのですがこれはどのような意味なのでしょうか。
JavaScriptなどに詳しい方教えていただけると幸いです。

Console
1[DOM] Found 2 elements with non-unique id #filesend: (More info: https://goo.gl/9p2vKq) <input id="filesend" onchange="imgPreView(event)" type="file" name="post[image]">
2<input id="filesend" onchange="imgPreView(event)" type="file" name="post[image]">
3<input id="filesend" onchange="imgPreView(event)" type="file" name="post[video]">

コード１

HTML
1<main id="main">
2  <article>
3    <section>
4     <img src="/uploads/post/image/35/F5E597BE-1121-46DF-A2E3-01EC93039C8F.jpeg" class="image-post" onerror="this.style.display='none'">
5    </section>
6    <footer></footer>
7   </article>
8</main>

JavaScript
1$(document).ready(function(){
2  $("main img").click(function() {
3    $("#graydisplay").html($(this).prop('outerHTML'));
4    $("#graydisplay").fadeIn(0);
5  });
6  $("#graydisplay, #graydisplay img").click(function() {
7    $("#graydisplay").fadeOut(0);
8  });
9});

コード２

HTML
1<div class="content">
2  <a class="js-modal-open" href="">
3    <img class="show-image-post" onerror="this.style.display='none'" src="/uploads/post/image/29/B96011D5-5DDC-47DD-9560-89B0075D01B4.jpeg">
4    <video class="show-image-post" controls="controls" onerror="this.style.display='none'" src="/uploads/post/image/29/B96011D5-5DDC-47DD-9560-89B0075D01B4.jpeg" style="display: none;"></video>
5    </a>
6</div>

JavaScript
1
2$(function(){
3  $('.js-modal-open').on('click',function(){
4   $('.js-modal').fadeIn(10);
5     return false;
6   });
7   $('.js-modal-close').on('click',function(){
8    $('.js-modal').fadeOut(10);
9     return false;
10    });
11});

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

回答2件

ベストアンサー

エラーの内容

idが重複していると言ってます
示されてる要素のどちらかのidを変更することで解消されます
次からはGoogle翻訳でもいいので翻訳してみてください

なぜイベントが発火しないか

$("#graydisplay, #graydisplay img")の要素にclick()でイベントを設定している為です。
その指定では非同期の要素にはイベントが付与されない為、ブラウザバックで発火しないものと思われます。
正しくはdocument要素に.on()でイベントを付与してみてください。
IE、Chromeでは動作確認済みですが、m.ts10806さんの言う通り、他のブラウザではバグがあるかもしれません。
一年前の記事で、端末がないので動作確認していませんが、参考URL

投稿2020/01/15 02:36

編集2020/01/15 02:40