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：按鈕處理程序意外執行

回答

相關問題