我正在寻找一种方法来将 jQuery Mobile 渲染数据加载到页面上。我知道过去曾讨论过非常相似的主题,但似乎没有什么是完美匹配的(或接近到让我找到答案的程度)。
问题是 jQuery Mobile 会在加载页面时动态地将类应用到 HTML 元素。通过 JavaScript 引入的内容不会被转换,因为该过程在 JavaScript 内容被放置到页面上之前运行。据推测,解决这个问题的方法是使用 .trigger('create') 函数。当您使用 load() 函数从外部页面拉取内容时,这似乎不起作用。
我可以从 twitter.html 文件(下面的示例)中获取数据,只是没有通过 jQuery Mobile 进行格式化
为了帮助证明我的观点,我尝试将脚本的一些入门示例放在一起。不幸的是,因为我正在加载一个外部文件,所以如果不将文件保存到您的计算机上进行测试,就没有简单的方法来表示这个问题。
主文件 (index.html)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://jquerymobile.com/demos/1.1.1/js/jquery.mobile-1.1.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://jquerymobile.com/demos/1.1.1/css/themes/default/jquery.mobile-1.1.1.css" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$('#container').load('twitter.html');
$('#container').trigger('create');
});
});//]]>
</script>
</head>
<body>
<div data-role="page" class="type-home">
<div data-role="content">
<!-- Load the Twitter Data -->
<div id="container"></div>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Sample</li>
<li><a href="#">Ignore this</a></li>
<li><a href="#">And look for Twitter data above</a></li>
</ul>
</div><!--/content-->
</div>
</body>
</html>
正在调用文件 (twitter.html)
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {
var url = "http://search.twitter.com/search.json?callback=?&rpp=10&q='jquery'";
$.getJSON( url, function( data ) {
var twitterList = $( "<ul data-role='listview' data-inset='true' data-theme='c' data-dividertheme='b' />" );
$.each( data.results, function( index, item ) {
$( "<li />", { "text" : item.text } )
.appendTo( twitterList );
});
$( "#tweets" ).fadeOut( "fast", function(){
$( this ).empty()
.append( twitterList )
.fadeIn( "slow" );
});
});
});
</script>
<div id="tweets">Loading Tweets...</div>
任何人都可以提供一个以这种方式调用文件的工作方法示例吗?
我调查过的与此相关的页面:
我有大约 10 页可供引用,但我是这个网站的菜鸟,所以我只能引用 2 页。
- > http://blog.stikki.me/2011/08/18/loading-dynamic-content-in-jquery-mobile-with-jquerys-load-function/
- > http://blog.dkferguson.com/index.cfm/2011/3/15/jQuery-Mobile-styling-loaded-content
在过去的 7 个小时里,我一直在努力解决这个问题,因此我们将不胜感激。我是 JavaScript 世界的新手,所以请放轻松。
最佳答案
如您所知,在 JQM 中,加载的页面不应该使用 $(document).ready。如果您控制着来自外部源的页面,请将函数修改为 pageInit,否则,您将需要一种方法来 Hook 外部页面正在进行的函数调用。
尝试扩展下载页面调用的函数。在这个例子中:$.getJSON。在扩展函数中,将成功函数与执行成功函数后执行 pageCreate 的函数包装起来。
关于javascript - jQuery Mobile 样式从另一个文件加载内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12228339/