当使用锚标签调用Phone-Gap/Jquery移动应用程序的某些页面时，它不会在DeviceReady上触发

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

我陷入了一个奇怪的问题，并尝试了从StackOverflow上的许多问题中获得的解决方案，但似乎什么都不起作用，所以在这里询问。

问题是：

当我调用这样的页面时：

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

它在DeviceReady上启动，但当我使用锚点标签从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((未启动

这是因为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");
});

相关内容

最新更新

热门标签：