Javascript 页面加载顺序有问题-未应用样式_Javascript_Jquery_Css_Json_Jquery Mobile

Javascript 页面加载顺序有问题-未应用样式

javascript jquery css json jquery-mobile

Javascript 页面加载顺序有问题-未应用样式,javascript,jquery,css,json,jquery-mobile,Javascript,Jquery,Css,Json,Jquery Mobile,我正在使用jQuery mobile为移动平台构建一个简单的web应用程序，我打算从API中读取一些数据，并将其作为JSON发送，这些数据是我从基于Django的服务器端项目中公开的，然后使用jQuery的机制对其进行解析，然后根据这些数据创建列表元素。现在，我有了以下index.html： <html> <head> <title>Playism App</title> <script type=

我正在使用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移动样式应用于这些手动注入的列表元素，而伪元素获得正确的样式。我认为元素的调用顺序有问题。提前谢谢

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

  <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>

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

    <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">

  <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>

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

尝试在中迁移此处的代码。代码如下：

<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工作正常。

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

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');
}

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

还有一件事，永远不要将DocumentReady与jQueryMobile结合使用，它们不应该结合使用。阅读更多关于它的信息。有时有效，有时无效。基本上，在使用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');
}

工作示例：

这正是问题所在。。。请看这里的截图：我希望Hello world的样式与Dummy相同…已修复。。。在别处发现了类似的线程：这是解决方案：$gamesList.listview'refresh'；文件已链接并正确加载。只是样式没有应用于动态注入的样式，例如：参见JSFIDLE。元素中注入的元素已设置样式。在render game函数中，完成添加项目后，调用enhancement$'gamelist'。listview'refresh'。不要使用。准备好了。