jQuery Mobile 和锚链接请求错误的页面答案

【问题标题】：jQuery Mobile and anchor links requesting wrong pagejQuery Mobile 和锚链接请求错误的页面
【发布时间】：2011-10-11 20:50:05
【问题描述】：

我开发了一个 Rails 应用程序，其主要功能是一个业务搜索页面，该页面通过显示一个业务结果页面和一个允许用户进一步搜索/过滤结果的表单来发挥作用。

最近我使用 jQuery Mobile 为这个应用程序实现了一个移动界面，设置如下：

业务结果页面是它有两个div，数据角色为“page”。第一个是用户在访问时看到的充满结果的实际页面，第二个 jQuery Mobile 页面具有 HTML id“search-form”并包含过滤结果所需的表单字段。

在第一页的标题栏中有一个按钮，该按钮使用对话框的 data-rel 链接到#search-form。

如果有人直接访问 site.com/businesses 然后点击链接，jQuery Mobile 会正确地将 site.com/businesses#search-form 加载到模式对话框中并且蠕虫可以正常工作，但是如果他们开始浏览任何其他页面上的会话，对话框始终包含其原始页面的内容。

例如，如果他们来到 site.com/someotherpage 的站点，然后以某种方式导航到 site.com/someotherpage#/businesses 并单击过滤器按钮，jQuery Mobile 会错误地请求并使用内容 site.com/ 填充对话框someotherpage#search-form

我尝试将过滤器链接从 #search-form 更改为使用 #search-form 实际硬编码当前页面的完整绝对路径，但没有任何效果。

在此先感谢，我要为这个发疯了！这是阻止我部署我们的移动版本的唯一原因。

【问题讨论】：

你能编辑你的问题并添加一些代码吗？也许是页面 HTML？

标签： jquery-mobile

【解决方案1】：

我也有同样的问题。放置在#thirdPage 中的任何按钮都将被jQuery 很好地修饰，但它们会从用户加载的第一页创建弹出窗口。此外，对话框上的后退按钮将指向第一页。

在静态页面中加载了一个按钮（如下所示），但同样适用于我通过 pagebeforecreate 事件插入的动态创建的按钮。

我开始认为所有弹出窗口都应该放在用户到达的第一页的 html 文件中。但这并没有帮助，而且会很尴尬。

顺便说一句，在桌面上的 Chrome 中测试它工作正常。只有在我的 Android 上才会出现问题。但这很可能与前面提到的相同原因：在 Chrome 上，我将自己加载第三页，而在 Android 上，我将通过第一页和第二页到达。

另一个特点是，在桌面上的 Chrome 中进行测试时，我附加到 #thirdPage 的 pagebeforecreate() 事件被称为 again，即使对话框完全在 #thirdPage 元素之外并且没有有我附加的任何自定义事件。在 Android 上不会发生对 pagebeforecreate() 的第二次调用。

还有一个有趣的事情：有这些问题的 HTML 页面被 jQueryMobile 赋予了一个元素，其 href 属性不以 html 结尾。所有其他页面最后都会得到那个“.html”。很奇怪。

  <html>
     <body>
      <div id="thirdPage" data-role="page" data-url="third">
       <a href="#desiredPopup" data-role="button" data-rel="dialog" data-transition="pop">Give me the popup</a>
      </div>
      <div id="desiredPopup" data-role="dialog" data-url="purchase" tabindex="0">
        <a href="#thirdPage" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "three"</a>
      </div>
     <body>
  <html>

【讨论】：