2012-01-11 87 views
6

我正在嘗試使用PhoneGap 1.3.0創建一個新的Android項目。和JqueryMobile。但是問題是,如果我使用Phone Phone Gap測試代碼Phone Gap工作! DeviceReady功能被觸發。請看看examlesjQuery Mobile&PhoneGap deviceReady()未解鎖

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Test Page</title> 
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.css" /> 
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /> 
<link rel="stylesheet" href="docsdemos-style-override.css" /> 
<script type="text/javascript" src="jquery.mobile/jquery-1.6.4.min"></script> 
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.0.js"></script> 
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script> 
<script type="text/javascript" charset="utf-8"> 


    var onDeviceReady = function() { 
     document.getElementById("devready").innerHTML = "OnDeviceReady fired."; 
    }; 

    function init() { 
     document.addEventListener("deviceready", onDeviceReady, true); 
    } 
</script> 
</head> 
<body > 

<div data-role="page" id="konum" data-theme="a"> 
<div data-role="header"> 
<h1>Position</h1> 
</div> 
<div data-role="content"> 
<p>APP will go here.</p> 
<p> 
<span id="devready">DeviceReady() Not Fired.</span> 
</p> 
</div> 

但我想使用jQuery分頁功能。結果是:Deviceready未被觸發。問題是什麼。如何使用PhoneGap JavaScript代碼和jQuery庫。

<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Test Page</title> 

    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.css" /> 
    <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /> 
    <link rel="stylesheet" href="docsdemos-style-override.css" /> 
    <script type="text/javascript" src="jquery.mobile/jquery-1.6.4.min"></script> 
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.0.js"></script> 
    <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script> 
    <script type="text/javascript" charset="utf-8"> 


     var onDeviceReady = function() { 
      document.getElementById("devready").innerHTML = "OnDeviceReady fired."; 
     }; 

     function init() { 
      document.addEventListener("deviceready", onDeviceReady, true); 
     } 
    </script> 
    </head> 
    <body > 
    <div data-role="page" id="home" data-theme="a"> 

    <div data-role="header"> 
    <h1>Home</h1> 
    </div> 

    <div data-role="content"> 
    <div data-role="content" id="twitList" > 
    something will go here 
    </div> 
    </div> 
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
     <div data-role="navbar"> 
     <ul> 
      <li><a href="#home" id="home" data-icon="custom">Home</a></li> 
      <li><a href="#about" id="about" data-icon="custom">About</a></li> 
      <li><a href="#konum" id="konum" data-icon="custom">Position</a></li> 
      <li><a href="#contact" id="contact" data-icon="custom">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 

    <!------page seperator --------> 

    <div data-role="page" id="about" data-theme="a"> 

    <div data-role="header"> 
    <h1>About</h1> 
    </div> 

    <div data-role="content"> 
    <p>Hoopp! <a href="#home">Back</a></p>  
    </div> 
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
     <div data-role="navbar"> 
     <ul> 
      <li><a href="#home" id="home" data-icon="custom">Home</a></li> 
      <li><a href="#about" id="about" data-icon="custom">About</a></li> 
      <li><a href="#konum" id="konum" data-icon="custom">Position</a></li> 
      <li><a href="#contact" id="contact" data-icon="custom">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <!------page seperator --------> 


    <div data-role="page" id="konum" data-theme="a"> 

    <div data-role="header"> 
    <h1>Position</h1> 
    </div> 

    <div data-role="content"> 


    <p>APP will go here.</p> 
    <p> 
    <span id="devready">DeviceReady() Not Fired.</span> 
    </p> 

    </div> 
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
     <div data-role="navbar"> 
     <ul> 
      <li><a href="#home" id="home" data-icon="custom">Home</a></li> 
      <li><a href="#about" id="about" data-icon="custom">About</a></li> 
      <li><a href="#konum" id="konum" data-icon="custom">Position</a></li> 
      <li><a href="#contact" id="contact" data-icon="custom">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 

    </body> 

感謝,

回答

4

你放在裏面document.addEventListener("deviceready", onDeviceReady, true);init從來沒有真正把它做初始化。因此,deviceready的聽衆未附加。嘗試改爲:

$(function() { 
    document.addEventListener("deviceready", onDeviceReady, true); 
}); 
+2

或更改主體標籤爲 – 2012-01-11 16:15:41

+0

謝謝你的男人。它的工作原理我在這個問題上工作2-3天:) – 2012-01-11 17:00:29

6

這是等價的;

$(document).ready(function() { 
    // Handler for .ready() called. 
    document.addEventListener("deviceready", onDeviceReady, true); 
}); 
+0

相當於/爲什麼? – 2013-08-20 13:41:29

+0

$(function(){}); <==> $(document).ready(function()){}); – 2013-09-16 12:51:11

0

當我將我的項目,包括iPhone,我不得不改變document.addEventListener