onsenUIでJQueryが効かなくなることがあるのは何故か。

monacaとonsenUIを使ってハイブリッドアプリを製作しています。
製作はコードを書いて、monacaデバッカーで確認しつつやっているのですが、JQueryが効いている時と
効いていない時があります。効いていない時はプロジェクトを更新すると、問題なく動作したりするのですが、
このようなJQueryの不安定さの原因が気になっております。

ご存知の方がいらっしゃれば教えてください。

よろしくお願いいたします。

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

回答1件

実際のコードを見ないとなんとも言えないのですが、一度エラーが起きると以後のJavaScriptが動作しなくなったりします。もしくは画面遷移すると効かなくなるようなパターンもあります。
再現するようなコードをご提示いただければどのパターンかは確認してみます。

投稿2017/05/07 12:59

akabee

総合スコア1947

kozy

2017/05/08 03:22

ありがとうございます！実物ではなく部分的な簡易コードですが、記載させていただきます。以下のようなコードでもJQueryがどうしても効きません‥。 ******index.html****** <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/main.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); document.addEventListener('show', function(event) { var page = event.target; var titleElement = document.querySelector('#toolbar-title'); if (page.matches('#first-page')) { titleElement.innerHTML = 'My app - Page 1'; } else if (page.matches('#second-page')) { titleElement.innerHTML = 'My app - Page 2'; } }); </script> </head> <body> 　<ons-navigator id="myNavigator" page="tabMain.html"></ons-navigator> 　　<ons-template id="tabMain.html"> <ons-page> <ons-toolbar> <div class="center" id="toolbar-title"></div> </ons-toolbar> <ons-tabbar position="auto"> <ons-tab label="Tab 1" page="tab1.html" active> </ons-tab> <ons-tab label="Tab 2" page="tab2.html"> </ons-tab> </ons-tabbar> </ons-page> </ons-template> <ons-template id="tab1.html"> <ons-page id="first-page"> <p style="text-align: center;"> <ons-button onclick="myNavigator.pushPage('univ_basic.html')">基本情報</ons-button> </p> </ons-page> </ons-template> <ons-template id="tab2.html"> <ons-page id="second-page"> <p style="text-align: center;"> This is the second page. </p> </ons-page> </ons-template> <ons-template id="univ_basic.html"> <ons-page > <ons-toolbar> <div class="left"><ons-back-button></ons-back-button></div> <div class="center"></div> </ons-toolbar> <img src="images/waseda_top.jpg" width="100%"> <ons-list> <ons-list-item tappable class="basic">基本情報<div class="right"><i class="fa fa-plus" aria-hidden="true"></i></div></ons-list-item> <div class="basic_info"> 基本情報基本情報基本情報基本情報基本情報基本情報基本情報基本情報基本情報基本情報基本情報基本情報基本情報基本情報基本情報 </div> </ons-list> </ons-page> </ons-template> </body> </html> ******main.js****** $(window).on('load', function() { $('.basicinfo').hide(); $('.basic').click(function(){ $('.basic_info').slideToggle(); }); }); 画面遷移すると効かなくなるようなパターンか、もしくはすごく基本的なところを見落としているような気はするのですが、ご教授いただければありがたいです。よろしくお願いいたします。

akabee

2017/05/08 03:49 編集

何を持って「動いていない」と感じられているのか、教えて頂けますか？実際に動かしてみましたが、ボタンを押せば次のページに遷移しますし、戻るボタンも効きますし、タブも有効のようです。どこが動いていないのかがよく分かりませんでした。とはいえ、画面とコードから色々とやりたそうなことは予想できるので、私なりの解釈でどうにかすることはできるのですが、それだと意図に沿わない可能性がありますので、まずどこがどのように動作することをkozyさんが期待していて、それがどのように期待通りに動いていないのかを教えて下さい。

kozy

2017/05/08 19:11

(あっちもこっちもすみません????) 正確に言うとJQueryが効いたり効かなかったりするんです。場所にもよるんですが、10回更新してやっと1回動作するようになることもあります。ただ、10回に1回でも動作することはあるのでコードの書き間違いとかではなさそうです。（エラーも出ません）。変な言い方ですが、感覚的にはパソコンが調子悪くなって、シャットダウンして再起動するとなおる、みたいな感じですね…。ちなみに上記のコードをテンプレートにそのままコピーしてもJQueryのところは殆ど動かないので（タブや画面遷移は問題なく動作します）、akabeeさんのほうで有効なら私の開発環境に問題があるのかもしれません。

akabee

2017/05/09 00:32

私にはどこの処理がjQueryで、上手く動かない可能性がある場所で、kozyさんが「動かない」と言っている場所なのかが分からないのです。jQueryのコードとなるとmain.jsの内容だとは思うのですが、いまいちこれで動かす内容が良く分かりません。（basic_infoを何かしたいのでしょうか？）お力にはなりたいのですがどこが問題なのかが分からないと調べられません。必ず何か原因はあるはずです。（「パソコンが調子悪くなる」のにも必ず原因があります）タブや画面遷移は問題ないということでよいのですね。例えば二つ目の画面上部のツールバーにタイトルが出ていなかったような気がしますが、その箇所のことを言っておられますか？もしくは二つ目の画面で＋ボタンを押しても画面遷移しなかったような気がしますが、その箇所のことでしょうか？

kozy

2017/05/09 07:04

説明不足ですみません。 main.jsのjQueryコードでやりたいことは、basic_infoを初期状態で非表示にした上で、basicをタップするとbasic_infoがスライドで現れる、という動作です。この動作が上手くいきません。akabeeさんのおっしゃる通り、二つ目の画面で＋ボタンを押して動作させたいところ、なにもならないということです。タブ、画面遷移は全く問題ありません。動かないのはjQueryのところだけです。

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