注册
登录
jqueryMobile
JQueryMobile：第二次页面访问后，SelectWidget不显示
返回
JQueryMobile：第二次页面访问后，SelectWidget不显示
作者:
仙风道骨刘憨憨
发布时间:
2024-12-11 12:40:58 (1月前)
转自：
<div class =“excerpt”> 首先：请原谅，我是一个新手 <span class =“result-highlight”> JQueryMobile </跨度> 我找不到我的问题的答案： 在iOS和Android上我的 <span class =“result-highlight”> JQueryMobile </跨度> 应用程序（JQM 1.4.5和JQ 1.11.3）的特点是“ </DIV>
收藏
举报
2 条回复
0#
回复此人
v-star*위위
|
2019-08-31 10-32
<div class =“post-text”itemprop =“text”> <P> 的<strong> 问题描述： </强> </p> <P> 正如Omar在评论中指出的那样，对于单页模型，在以下条件下，第一个JQM页面在DOM中重复： </p> <OL> <LI> 用于请求该页面的网址是yoursite.com/而不是yoursite.com/index.html </LI> <LI> 属性 <code> data-url="" </code> （ <a href="http://api.jquerymobile.com/data-attribute/" rel="nofollow"> 链接到API </A> ）尚未设置，或设置不正确 </LI> </醇> <P> 从另一个JQM页面导航到第一页时发生重复。 </p> <HR /> <P> 的<strong> 例 </强> ： 请参阅index.html和index2.html下的两个文件。 </p> <P> index.html包含一个指向index2.html的selectmenu和一个导航按钮。 </p> <P> index2.html只包含一个导航回index.html的按钮（请注意，这是一个带有href到index.html的锚标记，属性 <code> data-rel="back" </code> 未使用。） </p> <HR /> <P> 的<strong> index.html的： </强> </p> <pre> <code> <!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> </code> </pre> <P> 的<strong> index2.html： </强> </p> <pre> <code> <!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> </code> </pre> <P> 这些文件也可以在这里找到： <a href="https://www.elitesystemer.no/demo/JQMduplication/" rel="nofollow"> https://www.elitesystemer.no/demo/JQMduplication/ </A> </p> <P> 要重现此问题，请执行以下操作： </p> <UL> <LI> 将这两个文件存储在某个文件夹中 </LI> <LI> 导航到该文件夹，不要在URL中指定index.html </LI> <LI> 单击选择菜单并确认其有效 </LI> <LI> 单击第2页按钮并确认已加载index2.html </LI> <LI> 单击“主页”按钮并确认再次加载index.html </LI> <LI> 单击选择菜单。它不会打开。 </LI> </UL> <P> 现在检查DOM（大多数浏览器中的F12键）。将有一个页面具有该属性（在上面的URL的情况下） <code> data-url="/demo/JQMduplication/" </code> 以及具有数据属性的第二页 <code> data-url="/demo/JQMduplication/index.html" </code> 和 <code> data-external-page="true" </code> 。 </p> <HR /> <P> 的<strong> 固定 </强> </p> <P> 要更正此行为并避免页面重复，请使用data属性 <code> data-url </code> 提供正确的URL，而不是用于请求页面的URL，例如： <code> data-url="/path/index.html" </code> </p> <P> 的<strong> 例： </强> 正如上例中的正确index.html将是： </p> <pre> <code> <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> </code> </pre> </DIV>
编辑
登录
后才能参与评论
