0

我在我的应用程序中使用带有 jquery mobile 的 phonegap。

我陷入了一个奇怪的问题，并尝试了从 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() 未触发

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>

要更多地了解 abour 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 回答