Q&A
javascriptが一度しか実行されません。
以下のような状況で2度目の表示の時もjavascriptを実行したいです。
メイン画面→メニュー→javascriptを実行したい画面(実行される)→メニュー→javascriptを実行したい画面(実行されない)
以下ソースです。
◾️メイン画面.ejs(このejsを元にrenderer.jsを使ってコンテンツを入れ替えます)
<body> <div id="wrapper"> <!-- メニュー --> <div id="sideMenu"></div> <!-- コンテンツ --> <div id="content"></div> </div> <!-- jQuery --> <script>window.$ = window.jQuery = require('./js/jquery.js');</script> <!-- Menu --> <script> require('./js/menu.js') </script> <script> require('./js/renderer.js') </script> </body>
◾️初期表示.ejs(上のコンテンツに初期表示させるhtml)
<h2>メイン画面</h2>
◾️javascriptを実行したい画面.ejs(このejsを2回読み込むとmenu2.jsが1度しか実行されない)
<a href="#" id="start_button" class="btn">START</a> <script> require(process.cwd() +'/js/menu2.js') </script>
◾️メニュー.ejs
<div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"> <a> MENU </a> </li> <li> <a href="#" data-toggle="main">MAIN</a> </li> <li> <a href="#" data-toggle="menu1">MENU1</a> </li> <li> <a href="#" data-toggle="menu2">この画面で実行されない</a> </li> </ul> </div>
◾️renderer.js(コンテンツの入れ替え処理)
$(function () { const fs = require('fs'), ejs = require('ejs') setup() function setup() { //画面初期表示 $('#sideMenu').html(loadTemplate('menu', {})); $('#content').html(loadTemplate('main', {})); var cmdBox = $('#sidebar-wrapper'); // メニュー画面遷移 cmdBox.find('[data-toggle=main]').on('click', function () { $('#content').html(loadTemplate('main', {})); }); cmdBox.find('[data-toggle=menu1]').on('click', function () { $('#content').html(loadTemplate('menu1', {})); }); cmdBox.find('[data-toggle=menu2]').on('click', function () { $('#content').html(loadTemplate('menu2', {})); }); } /** * ejsを読み込む * * @param name * @param object * * @returns {String} */ function loadTemplate(name, object) { var tpl = fs.readFileSync(process.cwd() + '/ejs/' + name + '.ejs'); return ejs.render(tpl.toString(), object); } });
◾️menu2.js(2回実行されないjavascript)
$(function () { alert('hoge'); $("#start_button").click(function() { alert('hoge1'); }); });
一度めに「javascriptを実行したい画面.ejs」を読み込んだ時、hogeアラートが表示されるのですが、2度目の表示の時は表示されません。
正直、「メイン画面.ejs」で「menu2.js」をrequireしてあげた方が綺麗な気がしますが、そうすると$("#start_button").click(function()の処理が走らなくなります。
2回目が実行されない原因は2回「menu2.js」をrequireしているのが原因な気がします。
「メイン画面.ejs」で「menu2.js」をrequireして$("#start_button").click(function()の処理が正常に動く方法、あるいは「javascriptを実行したい画面.ejs」で2回目もjsvascriptを実行する方法がわかる方、ご教授お願いします。
回答1件
0
ベストアンサー
参考サイト：click()と.on("click"の違い
js
1 $("#start_button").on("click",function() { 2 alert('hoge1'); 3 });
これでどうでしょう？
なお、on()の場合、呼び出しは１回で十分です。
（逆に１回で２回実行されるような事が発生します。
画面を切り替える際等、場合によってはoff()を忘れたりすると同じ事が起きます）
投稿2017/07/27 14:57
総合スコア760
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。