Question

我正在使用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>

现在，只是为了测试我创建了Dummy列表元素并且它渲染完美但是没有样式应用于我使用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移动样式应用于这些手动注入的列表元素，而虚拟元素获得适当的样式。我认为调用元素的顺序有问题。提前谢谢！

Answer 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时，您必须手动启动标记增强过程。请在 article 。

中详细了解相关内容

另一件事，从不使用jQuery Mobile准备好的文档，它们不应该合并。详细了解 here 。有时它有时不起作用。基本上在使用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/

Answer 2

似乎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的工作原理，list-style为“none”。

Answer 3

首先应用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>

页面加载顺序有问题 - 样式不适用

3 个答案: