jquery mobile multipage不工作，但刷新后工作答案

【问题标题】：jquery mobile multipage doesn't work, but works after refreshingjquery mobile multipage不工作，但刷新后工作
【发布时间】：2014-01-02 01:04:21
【问题描述】：

我正在使用 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 -->

按钮上的clickign不起作用，但是当我刷新页面并再次单击时，它就起作用了。我对比了刷新前后的html源码，发现它们是一样的。

有什么问题还是 jquery mobile 的错误？

【问题讨论】：

哪个按钮不起作用？您是否将任何事件附加到该按钮？请详细说明并提供更多详细信息。
队列一个>
您要从 HTML 页面移动到另一个页面吗？

标签： jquery-mobile multipage

【解决方案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>

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

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

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

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

希望有帮助:)

【讨论】：

【解决方案2】：

多页模板不适用于 JQM (jQuery Mobile) AJAX 导航系统。如果您使用 AJAX 加载多页模板，它将无法正常工作。

多页模板需要页面刷新才能工作。这不是 JQM 的错误，而是多页模板的工作原理:)

【讨论】：

但我没有使用 ajax 加载页面。
然后看看 Jquery Mobile 文档，因为 JQM 使用 ajax 进行导航。
您的回答完全不正确。 多页模型 表示一个 HTML 文件中的所有页面。 单页模型 表示每个页面都在一个单独的 HTML 文件中。 jQM 不需要 需要刷新才能工作，它旨在与多页面模型一起高效工作。
@Omar，好的，假设您使用 AJAX 导航从单页导航到多页。现在可以使用多页吗？
不，它不会工作。要么是multi，要么是single，不可能同时混用。

【解决方案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>

【讨论】：