Question

我希望找到一种方法让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世界的新手，所以请放轻松我。

Answer 1

如您所知，在JQM中，加载的页面不应使用$（document）.ready。如果您控制来自外部源的页面，请将该函数修改为pageInit，否则，您将需要一种方法来挂钩外部页面正在进行的函数调用。

尝试扩展下载页面正在调用的功能。在此示例中：$ .getJSON。在扩展函数中，使用在执行成功函数后执行pageCreate的函数的wrap success函数。

JQM Reference:

Answer 2

您必须在更新的元素上触发“刷新”事件，或者在更改HTML后在新添加的元素的父元素上“创建”。例如。 $('ul').listview('refresh')。

jQuery Mobile Styling从另一个文件加载内容

2 个答案: