Question

我有一个包含以下内容的index.html：

的index.html

<html>
<head>...</head>
<body>
<div data-role="page" id="pageone">
    <div data-role="header">
        <div data-role="navbar">
            <ul>
                <li><a href="#pagetwo" id="pagetwo">Page two</a>
                </li>
                <li><a href="#pagethree" id="pagethree">Page three</a>
                </li>
            </ul>
        </div>
    </div>

<div data-role="page" id="pagetwo">
</div>

<div data-role="page" id="pagethree">
    <div id="headerPageThree" data-role="header">
      <div data-role="main">
       <div id="anyDiv"></div>
      </div>
   </div>
</div>
<body>
<html>

如您所见，index.html中的导航栏链接了pagetwo和pagethree。

此外我有一个main.js

main.js

$(document).ready(function () {
 $('<select>').attr({'name': 'fuu','id': 'load-fuu',
        'data-native-menu': 'false'}).appendTo('#headerPageThree');
        $('<option>').html('Load').appendTo('#load-fuu');
        $('select').selectmenu();
});

我们说我用Chrome打开index.html。网址是

file:///C:/Users/index.html

然后我点击＆＃34;第三页＆＃34;在导航栏中。然后是URL

file:///C:/Users/index.html#pagethree

问题是，像selectmenu这样的项目样式看起来很奇怪。例如，它是透明的。我添加了比main.js示例中显示的更多的东西，其中一些甚至没有显示。这意味着他们应该没有任何地方。

但最奇怪的是，如果我在URL为

的页面上按F5

file:///C:/Users/index.html#pagethree

，那么一切都很完美。我不明白这一点。

在index.html上按F5并在index.html＃pagethree上按F5有什么区别？

有人可以帮忙吗？

非常感谢。

Answer 1

使用jcre Mobile事件，如pagecreate;

，而不是常规的jQuery document.ready

$(document).on("pagecreate","#pagethree", function(){ 
    $('<select>').attr({'name': 'fuu','id': 'load-fuu',
        'data-native-menu': 'false'}).appendTo('#headerPageThree');
    $('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
    $('select').selectmenu();
});

如果您希望选择您的选项，请为其指定一个值属性。

<强> DEMO

Answer 2

必须在元素上设置主题，因为它不是从父页面应用的。我不完全确定为什么......

这可以通过在创建select元素时添加data-theme属性来完成：

$(document).ready(function () {
   $('<select>').attr(
     {'name': 'fuu','id': 'load-fuu',
      'data-native-menu':'false',
      'data-theme': 'a'
     }).appendTo('#headerPageThree');
          $('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
  $('#load-fuu').selectmenu();
});

最后，如果您愿意，a codepen example.

编辑：关于需要选择值的选项的观点是有效的（尽管在我们添加数据主题后它仍然会正确主题）

JQuery Mobile内容仅在重新加载时显示

2 个答案: