使用 jQuery 更新表格，但浏览器不刷新页面

Question

我有一个 node.js 和套接字应用程序，用于构建 SPA。用户填写表格以创建新大厅。当他们提交它时，它会向服务器发送一个套接字事件，服务器会添加大厅，然后服务器会使用更新的大厅列表向每个人发出一个事件。发生这种情况时，我的客户端 JS 会收到大厅列表并更新表格。在查看浏览器控制台时，这似乎工作正常。我看到大厅信息记录在我的 update_lobbies 函数中。我看到它在大厅中循环，我什至看到带有新信息的 html 更新。但是，浏览器似乎没有更新视图。如果我刷新请求相同大厅信息的页面，该页面将更新。此外，在刷新之后，该用户的未来大厅更新将在视觉上更新。

socket.on('lobby list', function(data){
    if(data.lobbies.length > 0){
        update_lobbies(data.lobbies);
    }
}

然后调用 update_lobbies()：

const update_lobbies = (lobbies) => {
        var lobbies_table = document.getElementById('lobbies_table');
        lobbies_table.innerHTML = "";

        console.dir(lobbies);

        $("#lobbies_table").append("<tr>" + 
        "<th>" + "Name" + "</th>" +
        "<th>" + "Participants" + "</th>" +
        "<th>" + "Current State " + "</th>" +
        "<th>" + "Actions" + "</th>" +
        "</tr>");

        for (var i = 0; i < lobbies.length; i++){

            console.log("looping");

            $("#lobbies_table").append("<tr>" + 
            "<td>" + lobbies[i].name + "</td>" +
            "<td>" + lobbies[i].participants.length + "/" + lobbies[i].capacity + "</td>" +
            "<td>" + lobbies[i].state + "</td>" +
            "<td>" + "<button id=\"join_lobby\" value=\"" + lobbies[i].name + "\">Join</button>" + " | " + "<button id=\"spectate_lobby\" value=\"" + lobbies[i].name + "\">Spectate</button>" + "</td>" +
            "</tr>");

        }
}

可能相关的一件事是我在表单中有一个e.preventDefault();，以防止我在提交表单时重新加载页面。删除这显然“修复”了问题，因为我正在重新加载，但我不想重新加载页面以让浏览器更新视图。我还没有完全存储状态信息，所以重新加载仍然不是一个选项。

Answer 1

我犯了一个愚蠢的错误。如果页面加载并且没有大厅，我隐藏了桌子。我只是在添加大厅时忘记显示它。