JQuery Mobile：第二页访问后选择不显示的小部件答案

【问题标题】：JQueryMobile: SelectWidget not showing after second page visitJQuery Mobile：第二页访问后选择不显示的小部件
【发布时间】：2016-03-23 01:05:05
【问题描述】：

首先：对不起，我是 JQueryMobile 的新手，我找不到我的问题的答案：

在 iOS 和 Android 上，我的 JQueryMobile 应用程序（JQM 1.4.5 和 JQ 1.11.3）在多页应用程序 (index.html) 的第一页上有一个 selectWidget：

<select name="type[]" id="type" multiple="multiple" data-native-menu="false">
  <!-- options -->
</select>

在第一次调用页面时，它的行为正确，样式精美。到目前为止一切正常。

现在，页脚包含一个所有其他页面也有的导航栏，其中包含返回索引页面的链接：

<a href="index.html" data-icon="home" data-transition="flip">Home</a>

因此，当我导航到任何其他页面然后使用导航栏中的链接返回 index.html 时，index.html 上的 selectWidget 不再触发。我测试了使用标题中的 JQM“后退”按钮导航回 index.html，然后 selectWidget 工作。当我使用 JQM“后退”按钮以外的链接（导航栏中的链接）导航到 index.html 页面时，它只是不起作用。

你能提示我正确的方向吗？我错过了什么？如何使 selectWidget 在后续页面调用中工作？再次，如果我不够精确或表达不够熟练，我深表歉意。

【问题讨论】：

我猜这是 jQM 中的一个错误，由于 DOM yoursite.com/ 加载 index.html 中的重复页面，然后当您导航到 yoursite.com/index.html 时加载相同的页面。如果您将小部件添加到登录页面以外的其他页面，它应该可以工作。检查GitHub上的问题，它可能在那里。
暂时等到bug修复，页面div加data-url="index.html"。
您好奥马尔，感谢您的及时回复。我确实将 data-url="index.html" 插入到页面 div 但它没有效果。
<div data-role=page data-url=path/index.html> 什么都没做？仅将其添加到索引页面中的页面 div 中。
@Omar 你是对的。在这种情况下，将
替换为
可以解决这个问题。对您的评论 +1，我认为这是目前的正确答案。

标签： jquery-mobile

【解决方案1】：

问题描述：

正如 Omar 在他的评论中指出的那样，对于单页面模型，第一个 JQM 页面在以下条件下在 DOM 中重复：

用于请求页面的 url 是 yoursite.com/ 而不是 yoursite.com/index.html
属性data-url=""（link to API）未设置，或设置错误

从另一个 JQM 页面导航到第一页时会发生重复。

示例：请参阅下面的两个文件 index.html 和 index2.html。

index.html 包含一个选择菜单和一个指向 index2.html 的导航按钮。

index2.html 仅包含一个导航回 index.html 的按钮（请注意，这是一个带有 href 到 index.html 的锚标记，不使用属性 data-rel="back"。）

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="main" class="ui-content">
    <p>Page 1 content</p>
    <select name="type[]" id="type" multiple="multiple" data-native-menu="false" data-inline="true" >
      <!-- options -->
      <option>Select...</option>
      <option value="1">Audi</option>
      <option value="2">BMW</option>
      <option value="3">Ford</option>
    </select>
    <a href="index2.html" data-role="button" data-inline="true" data-icon="star">Page 2</a>
  </div>
</div> 
</body>
</html>

index2.html：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="main" class="ui-content">
    <p>Page 2 content</p>
    <a href="index.html" data-role="button" data-inline="true" data-icon="home">Home</a>
  </div>
</div> 
</body>
</html>

这些文件也可以在这里找到：https://www.elitesystemer.no/demo/JQMduplication/

要重现该问题，请执行以下操作：

将这两个文件存储在同一个文件夹中的某处
导航到文件夹，不要在 URL 中指定 index.html
点击选择菜单并确认它有效
点击第2页按钮，确认index2.html已加载
单击主页按钮并确认 index.html 已再次加载
单击选择菜单。打不开。

现在检查 DOM（大多数浏览器中的 F12 键）。将有一页带有属性（在上述 URL 的情况下）data-url="/demo/JQMduplication/"，第二页带有数据属性 data-url="/demo/JQMduplication/index.html" 和 data-external-page="true"。

修复

要纠正此行为并避免页面重复，请使用数据属性 data-url 提供正确的 URL，而不是用于请求页面的 url，例如：data-url="/path/index.html"

示例： 如上例所示，正确的 index.html 将是：

<div data-role="page" data-url="/demo/test/index.html">
  <div data-role="main" class="ui-content">
    <p>Page 1 content</p>
    <select name="type[]" id="type" multiple="multiple" data-native-menu="false" data-inline="true" >
      <!-- options -->
      <option>Select...</option>
      <option value="1">Audi</option>
      <option value="2">BMW</option>
      <option value="3">Ford</option>
    </select>
    <a href="index2.html" data-role="button" data-inline="true" data-icon="star">Page 2</a>
  </div>
</div>

【讨论】：