0

アプリでjquery mobileでphonegapを使用しています。

私は1つの奇妙な問題で立ち往生しており、StackOverflowの非常に多くの質問から得た解決策を試しましたが、何も機能していないようですので、ここで質問してください.

問題は：

次のようなページを呼び出すと:

window.location.href="page1.html"//it works

それはonDeviceReadyを起動しますが、アンカータグを使用してjQueryMobile nav bar liタグから呼び出すと、本体をロードするだけで、何をしてもイベントは呼び出されません。

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

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
        <script type="text/javascript">


            function onBodyLoad()
            {
                document.addEventListener("deviceready", onDeviceReady, false);
            }

            function onDeviceReady()
            {
                alert("testing");
                //my things
            }

            </script>

        </head>

<body onload="onBodyLoad()">
    <div data-role="header" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>

                <li><a href="Page1.html" data-theme="a">page1</a></li>
                <li><a href="Page2.html" data-theme="a" class="ui-btn-active ui-state-persist">page2</a></li> <!-- these two pages get called but doesn't fires onDeviceReady or onBodyLoad -->

            </ul>
        </div><!-- /navbar -->
    </div>
</body>
</html>

これも試してみましたが、うまくいきませんでした：

document.addEventListener("deviceready", onDeviceReady, false);

これを解決する方法について何か提案はありますか?ありがとう。

注意：これらの回答（重複している可能性があります）は機能しませんでした。

jQuery Mobile & PhoneGap deviceReady() が起動されない

4

1 に答える 1

3

これは、jquery Mobile がページを直接変更する代わりに、アンカー タグをインターセプトして ajax を使用して HTML を取得したためです。あなたの場合、ajaxを使用してPage1.htmlを取得しており、Page1.htmlでjavascriptを実行しません。 ページを更新するには、アンカータグで
指定しますdata-ajax="false"

<a href="Page1.html" data-theme="a" rel="external" data-ajax="false">page1</a>

jquery Mobile についてさらに理解するには: http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html

また、jquery Mobile で推奨されているこの構造に従うとよいでしょう。

<div data-role="page" id="Page1"> 
    <div data-role="header">...</div> 
    <div data-role="content">...</div> 
    <div data-role="footer">...</div> 
</div>

ページの作成時に何かを実行したい場合は、イベントをページにバインドします

$( '#Page1' ).live('pagecreate',function(event){
  alert("Hello world");
});
于 2013-02-26T10:09:00.563 に答える