Question

首先：请原谅，我是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工作。当我使用链接（导航栏中的链接）导航到index.html页面而不是JQM“后退”按钮时，它不起作用。

你能否向我暗示正确的方向？我错过了什么？如何让selectWidget在后续页面调用中工作？如果我不够精确或者不能熟练地表达自己，我会再次道歉。

Answer 1

问题说明：

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

用于请求该网页的网址是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" >  <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键）。将有一个页面包含属性（如果是上面的网址）data-url="/demo/JQMduplication/"，第二个页面包含数据属性data-url="/demo/JQMduplication/index.html"和data-external-page="true"。

<强>修正

要纠正此行为并避免页面重复，请使用数据属性data-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" >  <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>

JQueryMobile：第二次页面访问后，SelectWidget不显示

1 个答案: