初めて利用させていただいております。
質問は、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); }); });
回答2件
あなたの回答
tips
プレビュー