【发布时间】：2016-12-10 02:19:02
【问题描述】：
我尝试将其他 html 内容加载到我的 div 中，但我发现我丢失了加载内容的样式。
我尝试使用以下代码：
.load()：
$('#paymentsExecutiveExSum').load("summary/ExecutiveSummary/paymentsExecutiveSummary.html");
.get() & .append();
$.get("summary/ExecutiveSummary/paymentsExecutiveSummary.html",function(data){
$("#paymentsExecutiveExSum").append(data);
});
我使用相同的代码：
<a data-role="button" class="fullWidth">Test</a>
Inspect Element 中的我的 CSS：
已加载（从其他html使用正常方式加载html）
未加载（我的情况，基本上不加载JQM按钮的css）
更新：
这是我的完整代码：
home.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="stylesheet" href="css/my.css"/>
<link rel="stylesheet" href="css/theme-addon.css"/>
<link rel="stylesheet" href="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.css"/>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
var animation = "none";
Number.prototype.formatMoney = function(c, d, t){
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onload="WL.Client.init({})" id="content" style='display: none' class="fullWidth">
<div data-role="page" id="homePage">
<div data-role="content">
<a href="#" data-role="button" id="login" class="fullWidth">Log In</a>
<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
</div>
<script src="js/plugin/simplesplitview-1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
</body>
my.js
$('#login').click(function(e){
e.preventDefault();
e.stopImmediatePropagation();
jq.mobile.changePage("next.html", { transition: animation, changeHash: true });
});
那么，说到summary.html：
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<button class="back" data-theme="a">Back</button>
<div class="ui-title headerTitle">Summary</div>
</div>
<div data-role="content" id='splitviewcontainer' class='splitviewcontainer summary'>
<div class='leftside'>
<div id="executiveSummaryMenuGroupButton">
<a id="paymentsExecutiveSummaryButton" data-role="button" class="executiveSummaryTitleMenuButton">Payments</a>
<div class="horizontalDivider"></div>
</div>
</div>
<div class='rightside' id='paymentsExSum'></div>
</div>
<script src="js/summary.js"></script>
summary.js
$(function(){
$('#executiveSummaryMenuGroupButton').hide();
$('#splitviewcontainer').simplesplitview();
});
$('#paymentsExecutiveSummaryButton').click(function(e){
$("#paymentsExSum").load("summary/ExecutiveSummary/paymentsExecutiveSummary.html").trigger('create'); //It seems it doesn't work
$('#splitviewcontainer').simplesplitview('showRight', 'paymentsExSum', true);
});
在不丢失css样式的情况下，将其他html的内容加载到div的正确方法是什么？
【问题讨论】：
-
确保你的类名没有深度嵌套
-
你能解释一下吗？
-
例如，如果您的 HTML 结构是
<div class="a"> <div class="b"> </div></div>并且您有类似.a .b { somestyle }的样式 .. 如果您移出div.b并在其他地方注入一些样式，显然样式不会是根据当前 CSS 样式应用的 case 仅在嵌套在 a 中时应用于 b -
嗨 Sushanth，谢谢你的解释，实际上 JQM 的 css 没有加载不是我的。请看我编辑的帖子。
标签： jquery css jquery-mobile