jQuery - 在$（document）.ready

Question

我目前正在开发基于jQuery mobile的移动应用程序，而且我遇到了在两个页面之间传递数据的问题。我使用一个简单的链接导航到我的下一页。

以下是我用来创建div的代码，该div应该在点击时导航到ViewGame.html页面：

var currentDiv = "<a href=\"ViewGame.html?id=" + item.id + "\"><div class=\"roomContainer\" >";
            currentDiv += "<div class=\"roomContainerTitle\">"+ item.name +"</div>";
            currentDiv += "<div>"+ item.nickname +"</div>";
            currentDiv += "<div>"+ item.game +"</div>";
            currentDiv += "<div>"+ item.rank +"</div>";
            currentDiv += "<div>"+ item.language +"</div>";
            currentDiv += "</div></a>";
            //alert(currentDiv);
            $("#resultRooms").append(currentDiv);

如您所见，我需要将当前页面中的id转移到ViewGame，因此我决定将其作为GET参数。

问题是在附加到ViewGame.html的js脚本中，参数在开头是未定义的。以下是一些代码，您可以理解：

<div data-role="page" id="home">
<script src="js/viewGameScript.js"></script>

<div data-role="header" data-add-back-btn="true">
    <p id="headerTitle">ViewGame</p>
</div>

<div data-role="content" id="mainContent">
    <button id="viewGameButton">Refresh</button>

    <div id="viewGameRoomTitle"></div>
    <div>
        <span class="profileSubTitle">Game : </span>
        <span id="viewGameRoomGame"></span>
    </div>
    <div>
        <span class="profileSubTitle">Rank : </span>
        <span id="viewGameRoomRank"></span>
    </div>
    <div>
        <span class="profileSubTitle">Author : </span>
        <span id="viewGameRoomAuthor"></span>
    </div>
    <div>
        <span class="profileSubTitle">Language : </span>
        <span id="viewGameRoomLanguage"></span>
    </div>
    <div>
        <span class="profileSubTitle">Free slots : </span>
        <span id="viewGameRoomNbSlots"></span>
    </div>
    <div>
        <span class="profileSubTitle">Start time : </span>
        <span id="viewGameRoomTimeStart"></span>
    </div>
</div>

$(document).ready(function() {

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var displayRoom = function() {
    var id = getUrlParameter('id');
    //alert(window.location.href + "  ---   " + id);

    $.get('http://192.168.1.42/m8_server/room.php?id=' + id, function(data) {
        var room = $.parseJSON(data).room;

        $("#viewGameRoomTitle").html(room.name);
        $("#viewGameRoomAuthor").html(room.nickname);
        $("#viewGameRoomGame").html(room.game);
        $("#viewGameRoomRank").html(room.rank);
        $("#viewGameRoomLanguage").html(room.language);
        $("#viewGameRoomNbSlots").html(room.nbSlots);
        $("#viewGameRoomTimeStart").html(room.timeStart);
    });
};

$("#viewGameButton").on("click", function() {
    displayRoom();
});

displayRoom();  

}）;

您可以看到ViewGame.html和viewGameScript.js的代码。 事实上，在第一次调用displayRoom（在脚本的末尾）时，id是未定义的（url是正确的，但没有参数），但是当我点击我的#viewGameButton时，一切都运行良好。我认为当代码是主要执行时，GET参数没有设置，但我不明白为什么：/

我希望你们能帮助我！

PS：对不起英语错误，我不是母语为英语的人