JQM .load（）/.html（）内容没有样式，尝试所有我发现 [英] JQM .load() /.html() content not being styled, tried all I found
问题描述
我试过所有我发现通过互联网，关于这一点，仍然不工作，
I've tried all i found trough internet about this, and still not working,
我有一个主页，我需要加载html内容到div like：
I have a main page where i need to load html content to a div like:
<div data-role="content" id="mainc">
</div>
事情是，jquerymobile css不是内容的，我一直在试与.load触发创建事件，尝试.html，没有帮助，这里是一些我尝试的事情：
The thing is, the jquerymobile css is not being aplied to the content, i've been trying around with .load triggering create event, tried with .html, nothing helped, here is some of the things i tried:
（他们加载完美的内容，只是jquery样式不应用）
( They load the content perfectly, just the jquery styling is not applied )
$("#mainc").load(target, function () {
$(this).trigger('create');
});
-
$('#mainc').load(target);
$('#mainc').trigger('create');
-
$.get(target, function(data) {
$("#mainc").html(data);
$('#mainc').listview('refresh');
});
还有一些，仍然这样做。
and some more, still doing the same.
这里是结果：
推荐答案
解释：
正确但有一个问题，它将不工作时，只加载一个列表视图。但是，当然有一个解决方法。
Explenation:
Your first loading method is usually correct but there's one problem, it will not work when loading only a listview. But of course there's a workaround.
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<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.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$("#index").load("load.html", function() {
$(this).trigger("pagecreate");
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
</div>
</body>
</html>
load.html
load.html
<div data-theme="b" data-role="header">
<h1>Index page</h1>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div><!-- /navbar -->
</div>
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div><!-- /navbar -->
</div>
这篇关于JQM .load（）/.html（）内容没有样式，尝试所有我发现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
