Question

我在jQuery Mobile和Phonegap应用程序中有2页，index.html和about.html

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    ... load jquery and jquery mobile...
</head> 

<body> 
    <div data-role="page" id="index">
    ...content goes here...
        <a href="about.html"  data-role="button">about</a>
    </div>
</body>
</html>

和about.html只有页面数据角色

<div data-role="page" id="about">
<a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>
...content goes here...

<a href="#dialog" id="form_dialog" data-rel="popup">qweqwe</a>
<div data-role="popup" id="dialog" data-overlay-theme="a" data-position-to="window">
    <div data-role="content" data-theme="c">
        <a href="#page" data-role="button" data-theme="c" >Ok</a>
    </div>
</div>

</div>

我遇到的问题是，一旦我加载了about页面，对话框和后面的链接就不起作用了。

如果我将弹出式html放在index中，它将起作用。

此外，当新页面加载样式时，这意味着加载了jquery mobile。

关于这个问题的任何想法？

感谢

Answer 1

从我所看到的，你的代码运行得很好。

我已经根据您的示例_

创建了这些文件

<强>的index.html

<!DOCTYPE html>
<html>
  <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/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>
  </head>
  <body>
        <div data-role="page" id="index">
        ...content goes here...
            <a href="about.html"  data-role="button">about</a>
        </div>  
  </body>
</html>

<强> about.html

    <div data-role="page" id="about">
            <a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>
            ...content goes here...

            <a href="#dialog" id="form_dialog" data-rel="popup">qweqwe</a>
            <div data-role="popup" id="dialog" data-overlay-theme="a" data-position-to="window">
                <div data-role="content" data-theme="c">
                    <a href="#page" data-role="button" data-theme="c" >Ok</a>
                </div>
            </div>              
    </div>

上面的代码工作得很好。也许你有一个jQuery Mobile和jQuery版本不匹配的问题？只有有问题的部分代码是这个后退按钮：

<a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>

不要使用带有data-rel =“back”的href位置，data-rel =“back”具有更高的优先级，因此它不是错误。弹出窗口关闭后，此后退按钮也无法正常工作。如果您在弹出窗口关闭后单击它，它将首先引导您返回about.html，然后再次单击引导您返回index.html。这不是错误，弹出窗口计为另一个页面操作。

因此，如果您的后退按钮删除data-rel =“back”。这将修复它在about.html页面上正常工作。

jQuery Mobile脚本不会在外部页面加载上运行，如何？

1 个答案: