Question

我正在使用jquery mobile 1.3.2并拥有如下的多页html：

<div data-role="page" data-add-back-btn="true" id="form">
   <div data-role="header" data-position="fixed">
      <a href="#queue" data-icon="star" data-iconpos="notext" class="ui-btn-right" data-transition="flip">Queue</a>
   </div><!-- /header -->
...
</div><!-- /page #form -->

<div data-role="page" id="queue" data-title="xxx">
...
</div><!-- /page #queue -->

单击该按钮不起作用，但当我刷新页面并再次单击时，它可以正常工作。我在刷新之前和之后比较了html源代码，发现它们完全相同。

有什么不对或者这是jquery mobile的错误吗？

Answer 1

是否有任何上一页调用与您发生冲突的页面，或者这是您的应用程序启动的第一页？

多页面环境需要刷新页面作为jQuery Mobile核心功能的一部分，此外还有jQuery Mobile链接页面的默认方法是通过ajax，这显然不会导致刷新。

您可以在项目中同时使用单页面和多页面环境，但如果要从单页面html重定向到多页面环境，则需要在正在使用的链接中添加data-ajax=false属性参考多页面。

在链接中使用：

<a id="link_sample" href="multipage_destination.html" data-role="button" name="link_sample" data-ajax="false">Take me to it</a>

如果需要将表单中的多页引用到单页环境中，则需要将data-ajax = false属性添加到<form>标记：

<form method="post" action="multipage_destination.html" data-ajax="false">

您可以在此处找到有关您的版本的jQuery Mobile Documentation中重定向的更多详细信息：

http://demos.jquerymobile.com/1.3.2/widgets/links/

希望有所帮助：）

Answer 2

多页面模板不适用于JQM（jQuery Mobile）AJAX导航系统。如果使用AJAX加载多页面模板，它将无法工作。

多页模板需要页面刷新才能工作。这不是JQM的错误，而是多页模板的工作方式：）

Answer 3

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="form">
    <div data-role="header">
        <a href="#queue" data-icon="star" data-iconpos="notext" class="ui-btn-right" data-transition="flip">Queue</a>
        <h1>Form</h1>
    </div>
    <div data-role="content"> 

    </div>
    <footer data-role="footer" data-position="fixed"></footer>
</div> 
<div data-role="page" id="queue">
    <div data-role="header">
        <a href="" data-rel="back" id="back" data-transition="slide" data-direction="reverse">Back</a>
        <h1>Queue</h1>
    </div>
    <div data-role="content" id="content">         
    </div>
</div> 
</body>

</html>

jquery移动多页不起作用，但刷新后工作

3 个答案: