Javascript JQuery移动内容仅在重新加载时显示_Javascript_Html_Jquery Mobile

Javascript JQuery移动内容仅在重新加载时显示

javascript html jquery-mobile

Javascript JQuery移动内容仅在重新加载时显示,javascript,html,jquery-mobile,Javascript,Html,Jquery Mobile,我有一个index.html，其中包含以下内容： index.html <html> <head>...</head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <div data-role="navbar"> <ul> <

我有一个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>

然后我点击导航栏的第三页。URL是

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

问题是，像selectmenu这样的项目的样式看起来非常奇怪。例如，它是透明的。我添加了比main.js示例中显示的更多的内容，其中一些甚至没有显示出来。也就是说，他们应该在什么地方都没有

但最奇怪的是，如果我在URL所在的页面上按F5键

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

，那么一切都是完美的。我不明白

在index.html上按F5和在index.htmlpagethree上按F5有什么区别

有人能帮忙吗

非常感谢。

代替常规的jQuery文档。准备好了，使用jQuery移动事件，如pagecreate

$(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();
});

如果希望选项是可选择的，请为其指定值属性

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

这可以通过在创建select元素时添加数据主题属性来实现：

$(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();
});

最后，如果你愿意

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

$(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();
});

$(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();
});