我在 jQuery Mobile 中有一个页面，页面本身有一些自定义的 css，但是当我通过 ajax 调用此页面时，它不会加载自定义 css。但是，如果我刷新页面，页面将加载自定义 CSS。我怎样才能阻止这种情况发生，因为我只希望自定义 css 在调用页面时显示。我的代码如下:
<!doctype html>
<html lang="en">
<head>
<title>Player</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<style>
#navgroup {text-align:center;}
#navgroup div {display:inline-block;}
.containing-element .ui-slider-switch
{
width: 100%;
}
input.ui-slider-input {display: none;}
.slider-shit .ui-btn
{
margin-left: -15px;
margin-top: -15px;
}
.slider-shit .ui-slider
{
width: 100%;
top: 3px;
margin: 0;
opacity: 1;
}
.slider-shit
{
padding: 0 20px 0 0;
}
.ui-slider div {
margin: 0 15px 0 38px !important;
}
.ui-slider div div {
margin: 0 !important;
}
#posSlider {
display: none;
}
#nextSong {
border-right-width: 1px !important;
border-bottom-right-radius: inherit;
border-top-right-radius: inherit;
}
#songOptionsButton {
position: absolute;
bottom: 10px;
right: 10px;
border-left-width: 1px !important;
border-bottom-left-radius: inherit;
border-top-left-radius: inherit;
}
.ui-header .ui-btn-icon-top .ui-btn-inner, .ui-footer .ui-btn-icon-top .ui-btn-inner {
padding: 37px 20px 0.5em;
}
</style>
</head>
<body>
<!--Player for indivdual and playlist songs-->
<div data-role="page" data-add-back-btn="true" id="player">
<div data-role="header" data-position="fixed">
<h1 id="songName">Nothing Playing...</h1>
<a href="#" id="favourite" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-right">mark as favourite</a>
</div>
<div data-role="content" style="height: 100%;" id="songPicture">
</div>
<div data-role="footer" data-position="fixed">
<table style="margin-left: 5px; margin-right: 5px;">
<tr>
<td><p id="songCurrentpos">0:00</p></td>
<td width="100%" class="slider-shit"><input type="range" name="slider" id="posSlider" value="0" min="0" max="100" width="100%" data-theme="d" data-highlight="true"/></td>
<td><p id="songDuration">0:00</p></td>
</tr>
</table>
<div id="navgroup">
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-iconpos="top" data-icon="back" id="previousSong" data-inline="true">Previous</a>
<a data-role="button" data-iconpos="top" data-icon="arrow-r" id="playSong" data-inline="true">Play</a>
<a data-role="button" data-iconpos="top" data-icon="forward" id="nextSong" data-inline="true">Next</a>
<a href="#songOptionsPage" id="songOptionsButton" data-role="button" data-iconpos="top" data-icon="gear" data-iconpos="notext" data-rel="dialog" data-inline="true"> </a>
</div>
</div>
</div>
</div>
</body>
最佳答案
如果我没理解错的话，您是在使用 ajax 将此页面加载到 DOM 中吗？如果这是真的，那么我理解你的问题。您会看到，当使用 ajax 加载页面时，只有 BODY 内容会加载到 DOM 中。
如果将 css 加载到第一个 HTML 文件中或将 STYLE block 移动到 BODY 内容中，则可以解决问题。
这是一个如何将样式包含在 BODY block 中的示例:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<style>
#content-test {
background: red !important;
}
</style>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="index3.html#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content" id="content-test">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
另外，我在我的另一个答案中用更多细节和几个例子描述了这个问题: https://stackoverflow.com/a/15431229/1848600
关于jQuery Mobile CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15732940/