JQuery Мобильный контент отображается только на перезагрузкой

У меня есть index.html, содержащий следующее:JQuery Мобильный контент отображается только на перезагрузкой

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>

Как вы видите, Navbar в 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(); 
});

Допустим, я открываю index.html с Chrome. URL-адрес:

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

Затем я нажимаю «Страница три» на панели навигации. URL-адрес

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

Проблема в том, что стиль элементов, таких как selectmenu, выглядит совершенно странно. Это прозрачно, например. Я добавляю больше вещей, чем показано в примере main.js, и некоторые из них даже не отображаются. Это значит, что нет ничего, где они должны быть.

Но самое любопытное в том, что, если нажать клавишу F5 на странице, где URL является

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

, то все идеально. Я этого не понимаю.

В чем разница между нажатием F5 на index.html и нажатием F5 на index.html # pagethree?

Может ли кто-нибудь помочь?

Большое спасибо.

источник

2015-06-03 ReyamOki

Тема должна быть установлена на элементе, так как она не применяется из родительской страницы. Я не совсем уверен, почему, хотя ...

Это может быть сделано путем добавления атрибута данных темы при создании выберите элемент:

$(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.

Редактировать: точка, сделанная о параметре, требующем значения для выбора, действительна (хотя она будет по-прежнему тема правильно после добавления темы данных)

источник

2015-06-03 17:49:40 laughingpine

Вместо обычного jQuery document.ready используйте события jQuery Mobile, такие как 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(); 
});

Если вы хотите, чтобы ваша опция была выбрана, дайте ей атрибут value.

DEMO

источник

2015-06-03 17:36:28 ezanker

JQuery Мобильный контент отображается только на перезагрузкой

ответ

Смежные вопросы