Phonegap：按钮处理程序意外执行

这是我第一次尝试用电话，也是我第一次尝试做单页应用程序。总之，我有一个index.html，其ID为“subscreen”。我也有2个按钮。每个按钮都会将一个Handlebar模板加载到该DIV中。Phonegap：按钮处理程序意外执行

问题：当我启动应用程序时，按钮处理程序立即按顺序被触发（我得到屏幕1和屏幕2的警报消息）。当我点击按钮时，没有任何反应，就好像事件绑定没有正确完成。

也许我在我的javascript有一个错误，但我不能告诉它是什么！

看哪，我简单的index.html：

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="format-detection" content="telephone=no" /> 
     <meta name="msapplication-tap-highlight" content="no" /> 
     <!-- WARNING: for iOS 7, remove the width=device-width and 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 to Device</p> 
       <p class="event received">Device is Ready</p> 
      </div> 


      <div id="subscreen">This is where we display the subscreens created using the 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 is SCREEN 1</h1></div> 
      </script> 

      <script id="scr2" type="text/x-handlebars-template"> 
       <div class='header'><h1>This is 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>

看哪，我简单index.js，在那里我试图把手在初始化函数编译我的模板。然后，我尝试将keyup事件绑定到我的2个按钮，点击时会将模板1或2加载到html页面的div中。

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 a 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)); 
    } 
};

来源

2015-04-23 aDvo

此代码触发功能

$('.screen1-key').on('keyup', app.renderScreen1()); 
$('.screen2-key').on('keyup', app.renderScreen2());

你必须通过一个函数参考事件处理程序不执行函数本身。此外，这些输入是按钮，所以您必须改用click事件处理程序。

$('.screen1-key').on('click', app.renderScreen1); 
$('.screen2-key').on('click', app.renderScreen2);

来源

2015-04-28 15:06:28 devconcept

Phonegap：按钮处理程序意外执行

回答

相关问题