我试图强制jQuery Mobile将样式应用于ajax调用后加载的内容。
出于隐私和安全原因，我无法发布指向我的json文件的链接，但我发布了以下代码。
我现在要做的是，在用json文件做一些事情后，然后将结果加载到.ui.content中。它工作得很好，但造型不适用。
我是JQuerymobile的新手，我读过我会使用像.trigger（'create'）这样的东西，我试过但我不知道发生了什么，它仍然没有造型，或者我不是在做它正确的方式..
这是我使用的代码。
感谢。
<!doctype html>
<html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>Our Video Download</title>
<style>
body{
text-align: center;
font-family: arial;
}
.button{
margin:20px;
font-size:16px;
font-weight: bold;
padding:5px 10px;
}
</style>
<style>
a{
text-decoration:none;
}
</style>
</head>
<body>
<div id="content" data-role="page">
<div data-role="header">
<h1>Video Download</h1>
</div>
<div data-role="main" class="ui-content">
<div id="display"> Display Place </div>
<input id="studio" type="button" value="Studio" onclick="processit('linktostudio.json')"/>
<input id="family" type="button" value="Family" onclick="processit('linktofamily.json')"/>
<input id="teenagers" type="button" value="Teenagers" onclick="processit('linktoteenager.json')"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
<!-- File size conversion feature -->
function humanFileSize(bytes, si) {
var thresh = si ? 1000 : 1024;
if(Math.abs(bytes) < thresh) {
return bytes + ' B';
}
var units = si
? ['kB','MB','GB','TB','PB','EB','ZB','YB']
: ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
var u = -1;
do {
bytes /= thresh;
++u;
} while(Math.abs(bytes) >= thresh && u < units.length - 1);
return bytes.toFixed(1)+' '+units[u];
}
// File conversion function ends here
html = "";
function processit(url){
$.ajax({
url: url,
dataType: "text",
success: function(data) {
var json = $.parseJSON(data);
category_and_description = '<h1> JW Video ::' + json.category.name + "</h1> <br />" + json.category.description;
html += category_and_description;
categoryname = json.category.name;
$.each(json.category.subcategories, function() {
subcategoryname = this.name;
category_and_subcategory = '<h2> ' + categoryname + "->" + subcategoryname + '</h2>';
html += category_and_subcategory;
$.each(this.media, function(){
//Individual video title
videotitle = this.title;
videoduration = this.durationFormattedMinSec;
vid_title = '<div data-role=\"collapsible\" data-collapsed-icon=\"carat-d\" data-expanded-icon=\"carat-u\" data-content-theme=\"a\" data-default="true" data-inset=\"true\"> <h4>' + videotitle + '</h4 </div>';
vid_duration = '<strong>' + this.durationFormattedMinSec + '</strong>';
html += vid_title;
//$.each(this.)
// alert(videotitle + "\n" + videoduration);
$.each(this.files, function(k, v){
eachlink = '<a href=' + v.progressiveDownloadURL + ' ' + ' data-role="button" data-enhance="true" data-icon="arrow-d" data-inline="true" data-mini=false>' + v.label + "->" + humanFileSize(v.filesize,true) + '</a>';
html += eachlink;
//$('.ui-content').trigger("create");
$('.ui-content').html(html);
})
})
});
}
});
};
</script>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>