cordova - Phonegap: Button Handlers executing unexpectedly -
this first phonegap helloworld attempt, , first attempt @ doing single page application. in summary, have index.html has div id "subscreen". have 2 buttons. each button load handlebar template div.
questions: when moment start app, button handlers fired in sequence ( alert message screen 1 , screen2). , when click on buttons, nothing happens, if event bind not done properly.
maybe have error in javascript can't tell is!
behold simple index.html:
<html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <!-- warning: ios 7, remove width=device-width , height=device-height attributes. see https://issues.apache.org/jira/browse/cb-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/handlebars-v3.0.1.js"></script> <title>hello world</title> </head> <body> <div class="app"> <h1>phonegap test</h1> <div id="deviceready" class="blink"> <p class="event listening">connecting device</p> <p class="event received">device ready</p> </div> <div id="subscreen">this display subscreens created using handlebar templates below</div> <input class='screen1-key' value="scr1" type="button"/> <input class='screen2-key' value="scr2" type="button"/> <script id="scr1" type="text/x-handlebars-template"> <div class='header'><h1>this screen 1</h1></div> </script> <script id="scr2" type="text/x-handlebars-template"> <div class='header'><h1>this screen 2</h1></div> </script> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html> behold simple index.js, attempt handlebar compile templates in initialize function. try bind keyup events 2 buttons, when clicked load templates 1 or 2 div on html page.
var app = { // application constructor initialize: function() { this.bindevents(); //kev add handlebars stuff this.screen1 = handlebars.compile($("#scr1").html()); this.screen2 = handlebars.compile($("#scr2").html()); }, bindevents: function() { document.addeventlistener('deviceready', this.ondeviceready, false); }, ondeviceready: function() { app.receivedevent('deviceready'); $('.screen1-key').on('keyup', app.renderscreen1()); $('.screen2-key').on('keyup', app.renderscreen2()); }, // update dom on received event receivedevent: function(id) { var parentelement = document.getelementbyid(id); var listeningelement = parentelement.queryselector('.listening'); var receivedelement = parentelement.queryselector('.received'); listeningelement.setattribute('style', 'display:none;'); receivedelement.setattribute('style', 'display:block;'); console.log('received event: ' + id); }, renderscreen1: function () { alert("render screen 1"); $('#subscreen').html(this.screen1()); }, renderscreen2: function () { alert("render screen 2"); data = {name: "mr wong"}; $('#subscreen').html(app.screen2(data)); } };
this code triggering functions
$('.screen1-key').on('keyup', app.renderscreen1()); $('.screen2-key').on('keyup', app.renderscreen2()); you must pass function reference event handler not execute function itself. inputs button must use click event handler instead.
$('.screen1-key').on('click', app.renderscreen1); $('.screen2-key').on('click', app.renderscreen2);