当使用 Anchor 标签调用 Phone-Gap/Jquery Mobile 应用程序的某些页面时，它不会触发 onDeviceReady答案

【问题标题】：When using Anchor tag to call some page of Phone-Gap/Jquery Mobile app,it's not firing onDeviceReady当使用 Anchor 标签调用 Phone-Gap/Jquery Mobile 应用程序的某些页面时，它不会触发 onDeviceReady
【发布时间】：2013-02-26 18:09:00
【问题描述】：

我在我的应用中使用 phonegap 和 jquery mobile。

我陷入了一个奇怪的问题，并尝试了从 StackOverflow 上的许多问题中获得的解决方案，但似乎没有任何效果，所以在这里询问。

问题是：

当我调用这样的页面时：

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

它会触发 onDeviceReady，但是当我使用锚标签从 jQueryMobile 导航栏 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() not fired

【问题讨论】：

标签： jquery cordova jquery-mobile

【解决方案1】：

是因为jquery Mobile截取了anchor标签使用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>

更多了解 abour jquery 手机：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");
});

【讨论】：

太棒了！谢谢。它奏效了。感谢您花时间回答这个问题！
你的意思是说如果我想触发 phonegap 的 onDeviceReady 事件，我应该像 $( '#Page1' ).live('pagecreate',function(event){ onDeviceReady() ; }); ??
不，它们是不同的。 onDeviceReady 是来自 Phonegap 的事件。如果您使用 Phonegap API，例如 Storage、通知，您必须确保 phonegap 已完全加载。 docs.phonegap.com/en/1.0.0/phonegap_events_events.md.htmlpagecreate事件，来自jquery Mobile api.jquerymobile.com/pagecreate