1

我正在使用 jQuery Mobile 为移动平台构建一个简单的 Web 应用程序，其中，我打算从 API 中读取一些数据，将其作为 JSON 发送（我已经从基于 Django 的服务器端项目中公开），然后使用 jQuery 解析它机制，然后我根据该数据创建列表元素。现在，我有以下 index.html：

<html>

    <head>
        <title>Playism App</title>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jsonParser.js"></script>

        <link rel="stylesheet" type="text/css" href="css/major.css">
        <link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
        <link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
    </head>

    <body>
        <p>List of games: </p><br/>
        <div id="gameContainer" data-role="page">
            <ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
                <!-- Content here will be dynamically generated based on the JSON output parsed from the API feed -->   
                <li><a href="#">Dummy</a></li>
            </ul>       
        </div>
        <script type="text/javascript" src="js/gamesRenderer.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){ 
                renderGames();
            });
        </script>
    </body>
</html>

现在，只是为了测试我创建了那个虚拟列表元素并且它呈现完美，但是没有任何样式应用于我使用来自 jQuery 的 .append() 调用注入的任何新元素。代码如下：

function renderGames(){
    for (var i = objCreated.length - 1; i >= 0; i--) {
        $("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");

    };
}

从 index.html 中可以看出，我在 DOM 就绪时调用它，但没有 jQuery 移动样式被应用于这些手动注入的列表元素，而 Dummy 元素得到正确的样式。我认为元素的调用顺序有问题。提前致谢 ！

4

3 回答 3

1

不要误会我的意思，但这个问题被问了很多次，但这里有一个解决方案：

function renderGames(){
    for (var i = objCreated.length - 1; i >= 0; i--) {
        $("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");

    };
    $("ul#gamesList").listview('refresh');
}

你需要使用：

$("ul#gamesList").listview('refresh');

使用动态添加的 jQuery Mobile 时，您必须手动启动标记增强过程。在这篇文章中阅读更多关于它的信息。

另一件事，永远不要使用 jQuery Mobile 准备好的文档，它们不应该组合在一起。在此处阅读更多相关信息。有时它有效有时无效。基本上，当使用 jQuery Mobile 时，总是使用页面事件。

您的最终 javascript 应该如下所示：

$(document).on('pagebeforeshow', '#gameContainer', function(){ 
    renderGames();
});

function renderGames(){
    for (var i = 10 - 1; i >= 0; i--) {
        $("ul#gamesList").append("<li><a href='#''>Some object" + i + "</a></li></ul>");

    };
    $("ul#gamesList").listview('refresh');
}

工作示例：http: //jsfiddle.net/Gajotres/5uPfM/

于 2013-09-26T07:39:17.863 回答
0

似乎 for 循环使 css 无法正确加载。不知道什么是'objCreated'。

尝试在JSFiddle中迁移代码。这是代码：

<body>
    <p>List of games: </p><br/>
    <div id="gameContainer" data-role="page">
        <ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">

            <li><a href="#">Dummy</a></li>
        </ul>       
    </div>


</body>

$(document).ready(function(){ 
    renderGames();
});

function renderGames(){

   $("ul#gamesList").append("<li><a href='#''>Hello world!</a></li></ul>")

}

css 似乎适用于注入的元素。由于 jQuery Mobile UI css 有效，列表样式为“无”。

于 2013-09-26T05:29:35.877 回答
-1

首先应用 css并查看您的css文件是否正确链接

    <link rel="stylesheet" type="text/css" href="css/major.css">
    <link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
    <link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">

然后 JS并查看您的js文件是否正确链接

  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jsonParser.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){ 
            renderGames();
        });
    </script>
于 2013-09-26T04:43:02.813 回答