Blazor Server应用中$(document).ready()函数无法运行的问题求助

问题背景 #

我正在将WebGazer眼动追踪的校准功能适配到Blazor Server应用中，但遇到两个问题：

• 应用启动时，calibration.js中的$(document).ready()函数完全不执行
• 点击校准按钮调用Restart函数后，ready里的逻辑也没有触发

现有代码 #

Razor组件（Calibration.razor） #

@page "/Calibration"
@inject IJSRuntime JS

<h1>Calibration</h1>

<ul class="nav navbar-nav">
    <li id="Accuracy"><a>Not yet Calibrated</a></li>
    <li> <button @onclick="CalibrateWebgazer">Calibrate WebGazer</button></li>
</ul>

<div class="calibrationDiv">
    <button class="Calibration" id="Pt1"></button>
    <button class="Calibration" id="Pt2"></button>
    <button class="Calibration" id="Pt3"></button>
    <button class="Calibration" id="Pt4"></button>
    <button class="Calibration" id="Pt5"></button>
    <button class="Calibration" id="Pt6"></button>
    <button class="Calibration" id="Pt7"></button>
    <button class="Calibration" id="Pt8"></button>
    <button class="Calibration" id="Pt9"></button>
</div>

@code {
    private async Task CalibrateWebgazer()
    {
        await JS.InvokeAsync<object>("Restart");
    }

    public async ValueTask DisposeAsync() => await this.DisposeAsync();
}

_Layout.cshtml中的脚本引用 #

<script src="_framework/blazor.server.js"></script>
<script src="~/js/main.js"></script>
<script src="~/js/webgazer.js"></script>
<script src="~/js/gaze.js"></script>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/calibration.js"></script>
<script src="~/js/precision_calculation.js"></script>
<script src="~/js/precision_store_points.js"></script>
<script src="~/js/resize_canvas.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

疑问点 #

1. 需要做哪些修改才能让校准逻辑正常执行？
2. $(document).ready()的触发时机和执行逻辑是什么？
3. 为什么在原HTML示例中只调用Restart就能触发calibration.js的逻辑，Blazor里却不行？

问题原因与解决方案 #

1. 核心问题分析 #

• 脚本加载顺序错误：calibration.js依赖jQuery，但你把jquery.min.js放在了calibration.js之后加载，导致$(document).ready()执行时jQuery还未初始化，代码直接报错失效。
• Blazor DOM渲染机制差异：Blazor Server是服务器端渲染后通过SignalR同步DOM，$(document).ready()在页面初始加载时触发，但此时/Calibration组件的DOM还未生成；且Blazor导航是客户端路由，不会刷新页面，所以不会再次触发ready事件。

2. 具体修复步骤 #

步骤1：调整脚本加载顺序

将jquery.min.js移到所有依赖它的脚本之前，确保jQuery先加载完成：

<script src="_framework/blazor.server.js"></script>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/main.js"></script>
<script src="~/js/webgazer.js"></script>
<script src="~/js/gaze.js"></script>
<script src="~/js/calibration.js"></script>
<script src="~/js/precision_calculation.js"></script>
<script src="~/js/precision_store_points.js"></script>
<script src="~/js/resize_canvas.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

步骤2：适配Blazor组件生命周期

放弃依赖$(document).ready()，改为在Blazor组件渲染完成后手动初始化校准逻辑：

• 修改calibration.js，把$(document).ready()内的代码抽成独立函数：

// calibration.js
function initCalibration() {
    // 将原来$(document).ready()中的所有代码移到此处
    // 例如：绑定校准按钮点击事件、初始化WebGazer配置等
}

• 修改Razor组件，在OnAfterRenderAsync中调用初始化函数：

@page "/Calibration"
@inject IJSRuntime JS
@implements IAsyncDisposable

<h1>Calibration</h1>

<ul class="nav navbar-nav">
    <li id="Accuracy"><a>Not yet Calibrated</a></li>
    <li> <button @onclick="CalibrateWebgazer">Calibrate WebGazer</button></li>
</ul>

<div class="calibrationDiv">
    <button class="Calibration" id="Pt1"></button>
    <button class="Calibration" id="Pt2"></button>
    <button class="Calibration" id="Pt3"></button>
    <button class="Calibration" id="Pt4"></button>
    <button class="Calibration" id="Pt5"></button>
    <button class="Calibration" id="Pt6"></button>
    <button class="Calibration" id="Pt7"></button>
    <button class="Calibration" id="Pt8"></button>
    <button class="Calibration" id="Pt9"></button>
</div>

@code {
    private bool _firstRender = true;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _firstRender = false;
            // 组件第一次渲染完成后初始化校准逻辑
            await JS.InvokeAsync<object>("initCalibration");
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task CalibrateWebgazer()
    {
        await JS.InvokeAsync<object>("Restart");
    }

    public async ValueTask DisposeAsync()
    {
        // 可选：添加清理逻辑，比如停止WebGazer追踪
        // await JS.InvokeAsync<object>("webgazer.stop");
    }
}

3. 疑问解答 #

• $(document).ready()的触发逻辑：这个函数在浏览器加载完HTML文档、DOM树构建完成后立即执行，仅在页面初始加载时触发一次。
• 原HTML示例正常工作的原因：纯HTML项目中，页面加载时所有DOM元素已经存在，且jQuery提前加载完成，$(document).ready()会初始化好所有事件和变量，后续调用Restart时直接使用这些已初始化的资源。
• Blazor中失效的原因：Blazor Server的组件DOM是动态渲染的，初始页面加载时/Calibration的DOM还不存在；且客户端导航不会刷新页面，不会再次触发ready事件，因此依赖ready的初始化逻辑无法执行。

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