$.getScript and css issue with phonegap and jquery mobile

问题

here are my files.

/www/js/index.js is left as it is.

page flow should be: app starts -> index.html -> loads MainPage.html from indexB.js -> MainPage.html but all css don't get loaded.

When i remove 'body onload="init();"' from index.html and copy&past MainPage.html onto index.html's body, css works with no problem.

From this, i checked that all the css routes are correct.

/www/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" charset="utf-8" src="jqmobile/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>     
    <script type="text/javascript" charset="utf-8" src="jqmobile/jquery.mobile-1.4.5.min.js"></script>

    <link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="css/MainPage.css">

    <script src="js/index.js"></script>
    <script src="js/indexB.js"></script>
</head>
<body onload="init();">
<div data-role="page">

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

/www/js/indexB.js

var pagesHistory = [];
var currentPage = {};
var path = "";

function init(){
$("div[data-role='page']").load(path + "pages/MainPage.html", function(){
    $.getScript(path + "js/MainPage.js", function() {
        if (currentPage.init) {
            currentPage.init();
        }
    });
});
}

/www/pages/MainPage.html

<script>
$.getScript(path + "js/MainPage.js");
</script>

<div id="header-wrapper">
    <div data-role="navbar" id="navBar">
        <ul id='navBarUl'>
            <li>
                <a href="#" data-role="tab" data-icon="user" data-transition="none" class="fastClick">Friends</a>
            </li> 
            <li>
                <a href="#" data-role="tab" data-icon="clock" data-transition="slideup" class="fastClick ui-btn-active ui-state-persist">Main</a>
            </li>
            <li>
                <a href="#" data-role="tab" data-icon="gear" data-transition="none" class="fastClick">Settings</a>
            </li>
        </ul>       
    </div>
</div><!--header-wrapper ends-->
<div id="content-wrapper">
 .........
</div><!--content-wrapper ends--> 
<div data-role="footer" data-position="fixed" data-theme="a">
</div><!--footer ends-->

/www/js/MainPage.js

currentPage = {};
currentPage.init = function() {
$.getScript(path + "css/MainPage.css");
};

/www/css/MainPage.css

.navBtns {
display: block;
clear: both;
}
.......
a#mine{
background-color: #fdedb1;
}

回答1:

Is the variable path defined in MainPage.js? I'm guessing it's not as it's out of scope. Test it by putting alert(path); in MainPage.js.

来源：https://stackoverflow.com/questions/28807740/getscript-and-css-issue-with-phonegap-and-jquery-mobile

标签

jquery

css

cordova

jquery-mobile