ハイブリッドアプリでシステム開発:JSでボタンへのイベント登録はloadの後じゃ無いとだめ
最近流行のハイブリッドアプリの開発に挑戦してみようと思い、実質二択であるmonacaとionicを試してみることに強いました。まずはmonacaから。HTML5+JavaScriptを標榜するだけあって、開発自体はHTML5+JavaScriptそのまんまな感じですね。HTMLで書いてJSのイベントドリブンで記述していきます。ここでハマったのが、HTML要素にイベントを登録するには、ページの読み込み、または少なくともDOMツリーの構築が完了してからで無いといけないということ。以前にNodeでシステムを作っていたときには意識していたはずなんですが、すっかり忘れていました。というかこのあたりは公式チュートリアルとか公式本で言及しておいて欲しいところです。甘い? ons.bootstrap(); var datenow = new Date(); console.log(datenow.toString()); 内容は公式のサンプルのOnsen UIの最小限のテンプレに記述を加えたものです。 $(""ons-button#page1button""),on(""click"",function(e){ console.log(""test script on page1.html ""); }) Navigator test button 1 test button 2 windowのloadイベントが発火した後に実行したaddEventListenerとかJQueryのonは有効なようで、関数が登録されちゃんと実行されます。一方スクリプト読み込み時に実行されるものは登録されませんでした。 /*//これは動作しないdocument.getElementById(""page1button"").addEventListener(""click"", function(e){ console.log(""test log addeventlister non jquery 1"");});//これも動作しないdocument.addEventListener(""click"", function(e){ if(e.target.id ===""page1button""){ console.log(""test log addeventlister non jquery 2""); }});//これも動作しない$(""ons-button#page1button""),on(""click"",function(e){ console.log(""test log…
Continue reading...