登录后切换页面至display:block时，script无法加载的问题排查

你提到登录成功后通过AJAX将#main-page设置为display:block，然后尝试判断该元素显示状态来加载socket.js，但没有效果。先拆解下你的核心问题：

问题根源分析 #

你那段判断页面显示状态并加载脚本的代码，是在页面初始化时就直接执行了——而登录验证、显示#main-page的操作是异步的AJAX请求，页面初始化时#main-page还是默认的隐藏状态，所以这段代码根本不会触发。另外，$.getScript的写法也有错误，你传的参数里包含了多余的<script>标签，应该直接传入脚本的URL。

解决方案 #

把加载脚本的逻辑放到验证用户成功、显示#main-page的回调函数内部，确保只有当页面确实显示后才执行加载操作，同时修正$.getScript的用法：

修改后的核心代码示例

// Login POST
$('#frm-login').submit(function (e) {
    event.preventDefault()
    const $loginButton = $(this).find('button'); // 补全按钮变量定义
    $loginButton.text('Please wait ...').prop('disabled', true) // 补全disabled的状态值
    $.ajax({
        url: "/login-user",
        type: "POST",
        data: $('#frm-login').serialize(),
        dataType: "json"
    }).always(function (response) {
        $loginButton.text('Logging in').prop('disabled', false) // 补全取消禁用的状态值
        console.log("Login", response)
        if (response.status == "error") {
            $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
            return
        }
        sessionStorage.setItem('token', response.token)
        if (sessionStorage.token) {
            $.ajax({
                type: "GET",
                url: "/verify-user",
                headers: {
                    'Authorization': 'Bearer ' + sessionStorage.token
                },
                dataType: "json"
            }).always(function (response) {
                console.log("Auth", response)
                if (response.status == "error") {
                    $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
                    return
                }
                $('#index-page').css('display', 'none')
                $('#main-page').css('display', 'block')
                
                // --- 在这里加载脚本（确保页面已显示）---
                // 加个标记避免重复加载
                if (!$('#main-page').data('scriptLoaded')) {
                    $.getScript('/js/socket.js')
                        .done(function() {
                            console.log("JS loaded successfully")
                            $('#main-page').data('scriptLoaded', true) // 标记脚本已加载
                        })
                        .fail(function(jqxhr, settings, exception) {
                            console.error("Failed to load script:", exception)
                        })
                }
            })
        }
    })
})

额外优化说明

1. 你之前的prop('disabled')写法不完整，必须传入true或false才能正确设置按钮的禁用状态；
2. 给$.getScript加上done和fail回调，能更直观地调试脚本加载状态；
3. 用data()方法标记脚本是否已加载，避免用户重复登录时重复加载同一份脚本。

内容的提问来源于stack exchange，提问作者July333