質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

4162閲覧

javascriptが一度しか実行されない

morningglow

総合スコア85

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/07/27 14:28

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を実行する方法がわかる方、ご教授お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

参考サイト:click()と.on("click"の違い

js

1 $("#start_button").on("click",function() { 2 alert('hoge1'); 3 });

これでどうでしょう?
なお、on()の場合、呼び出しは1回で十分です。
(逆に1回で2回実行されるような事が発生します。
画面を切り替える際等、場合によってはoff()を忘れたりすると同じ事が起きます)

投稿2017/07/27 14:57

tomari_perform

総合スコア760

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問