jQuery Mobile：CSS不會在第一頁加載，但從第二次渲染

我正在創建一個簡單的詞彙頁面（目前爲韓文 - 英文）。所有的卡都保存在localStorage中。我使用jQueryMobile有多個頁面模板如下圖所示代碼：jQuery Mobile：CSS不會在第一頁加載，但從第二次渲染

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Card Reader</title> 

    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" /> 
    <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /> 
    <link rel="stylesheet" href="docsdemos-style-override.css" /> 
    <script type="text/javascript" src="custom_codes.js"></script> 
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script> 
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script> 
    <script> 
    $('document').ready(function(){ 
    var list = JSON.parse(localStorage.getItem('cardList')); 
    if(list==null){ 
     populateCards(); 
     list = JSON.parse(localStorage.getItem('cardList'));     
    } 
    $cardList=$('#cardList'); 
    $cardList.empty();  
    $.each(list,function(i, value){ 
     $newItem = $('<li />');                  
     $link = $('<a data-transition="slidefade" href="#wordListPage">'+value+'</a>'); 
     $link.attr('onClick',"loadWordList('"+value+"','wordList"+i+"')"); 
     $newItem.append($link); 
     $cardList.append($newItem);    
    });  
});  

function loadWordList(cardName,cardId){ 
    var wordList = JSON.parse(localStorage.getItem(cardId)); 
    if(wordList==null){ 
     alert('no words in the list');    
     return; 
    } 
    $wList=$('#wordList');   
    $wList.empty(); 
    $list = $('<ul/>'); 
    $list.attr('data-role','listview'); 
    $.each(wordList,function(i, value){ 
     $newItem = $('<li />'); 
     $newItem.append('<h3>'+value['word']+'</h3>');    
     $newItem.append('<p>'+value['definition']+'</p>');   
     $list.append($newItem).trigger("create"); 
    });  
    $wList.append($list).trigger('create');  
    $('#cardTitle').html(cardName);  
} 
</script> 

</head> 
<body> 

<div data-role="page" id="welcomePage"> 
    <h2> 
     Welcome to Korean Learner 
    </h2> 
    <a data-transition="slidefade" href="#cardsListPage">   
     Load Cards   
    </a> 
</div> 

<div data-role="page" id="cardsListPage"> 
    <div data-role="content"> 
     <ul id="cardList" data-role="listview"> 
     </ul> 
    </div> 
</div> 

<div data-role="page" id="wordListPage"> 
    <div data-role="header" class="ui-header ui-bar-b" data-position="fixed"> 
     <a data-rel="back">Back</a> 
     <h1 id="cardTitle" >Card List</h1> 
    </div> 
    <div data-role="content" id="wordList">   

    </div> 
</div> 
</body> 
</html>

當我檢查這個瀏覽器，輸出流量，如下圖：

Link to image, as I cannot post here being new user

我已經使用JavaScript來加載cardList和wordlist。 populateCards（）函數是custom_codes.js中的一個函數，它只將一個卡片數組加載到localstorage中。我現在唯一遇到的錯誤是，wordList頁面在第一次加載時沒有CSS加載（第三次彈出流），並且在我回來（上次彈出）後完全正常。任何人都可以幫我解決這個錯誤。此外，我會很高興獲得一些性能提示，因爲我的目標是用於手機。

來源

2012-11-07 Sunil

歡迎JQM，不像jQuery的你不使用$(document).ready了對於初學者（http://jquerymobile.com/test/docs/api/events.html）你現在監聽pageinit和pageshow事件，可能是你的問題是，你的JS運行JQM觸發pageshow這之後將立即觸發後當您瀏覽回到頁面pageinit

pageshow再火，這就是爲什麼它是工作，當你回去

當JQM觸發pageshow這是當它通過並應用您從您的API使用的CSS。但是當這些被解僱的時候，你從未添加過元素，所以他們沒有被jQM所打造。

如果在通過異步調用之後添加了元素，那麼您也需要手動調用.listview('refresh')。

我也有一箇舊的答案在我說明我如何安排我的JS是很容易理解的多頁環境how to organize ur jQM JS

而且你使用的是單頁模板如果welcomePage /調試的和cardsListPage在同一個文件中。

多頁面模板是當你在一個單獨的文件中有每個頁面時，我認爲更好，因爲如果你關心性能，一開始加載的數據少。但是您需要遵循我在鏈接或自己開發的解決方案中使用的JS設置，但基本上無論您從哪個頁面開始，都要加載所有JS 一次。並處理每個pageinit/pageshow事件，並有一些方法可以確定您的多頁面模板中的哪個頁面。

您使用IDS但是，這並不正常工作，因爲在多頁面模板JQM可以加載任意網頁超過一次（到一個單一的DOM，檢查調試器看 - 假設domCaching上），好吧，我猜你仍然可以通過檢查.attr('id')知道它是什麼網頁，但這是誤導，因爲如果你做了$('#cardsListPage')，你可能會得到許多元素之一。

希望能讓你得到開始。

來源

2012-11-07 07:28:49

非常感謝:)，我會按照您的建議嘗試，並希望它能正常工作。 – Sunil

jQuery Mobile：CSS不會在第一頁加載，但從第二次渲染

回答

相關問題