2012-01-11 7 views
6

PhoneGap 1.3.0で新しいAndroidプロジェクトを作成しようとしています。およびJqueryMobile。しかし、問題は、もし私がPhone GapテストコードPhone Gapを使っているのであれば! DeviceReady関数が発生します。試験を見てくださいjQuery 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

あなたはinitdocument.addEventListener("deviceready", onDeviceReady, true);を置いたが、実際に初期化を行うためにそれを呼び出すことはありません。したがって、devicereadyのリスナーは添付されません。次のように変更してみてください:

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

に変更するか、bodyタグを –

+0

に変更してください。それは私がこの問題を2〜3日間働いています:) –

6

これは同等です。

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

/何のために? –

+0

$(function(){}); <==> $(ドキュメント).ready(関数()){}); –

0

プロジェクトをiPhoneに変換すると、document.addEventListenerに変更する必要がありました。

関連する問題