使用jQuery无法清空Blazor（ASP.NET Core 3.0）页面输入字段

嘿，我来帮你搞定这个问题！你的jQuery代码没生效，核心原因是Blazor的DOM渲染逻辑和jQuery事件绑定时机不匹配，或者直接绑定动态元素导致的事件丢失。下面给你一步步拆解解决方案：

1. 用事件委托替代直接元素绑定 #

Blazor是动态渲染组件的，哪怕你的<select>看起来是静态写的，组件初始化的顺序也可能让jQuery在DOM元素还没生成时就执行了绑定，导致事件挂不上。用事件委托绑定到父级（比如<form>或者document）就能完美解决这个问题：

修改你的.js文件代码为：

// 绑定到document，监听#AppSelect的change事件
$(document).on('change', '#AppSelect', function () {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

事件委托的原理是把事件绑定到已经存在的父元素上，当事件冒泡上来时再判断目标元素，不管目标元素是初始就有还是后来动态生成的，都能触发事件。

2. 确保脚本加载顺序正确 #

在_Host.cshtml里，一定要先加载jQuery，再加载你的自定义脚本，比如：

<!-- 先加载jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 再加载你的自定义脚本 -->
<script src="~/js/your-custom-script.js"></script>

如果你的自定义脚本先加载，jQuery还没初始化，那代码肯定跑不起来。

3. 配合Blazor生命周期确保DOM已渲染 #

如果上面的方法还是不行，那可以在Blazor组件的OnAfterRenderAsync方法里手动执行事件绑定，确保组件渲染完成后再挂事件：

在你的Blazor页面组件里添加：

@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用JS方法绑定事件
            await JSRuntime.InvokeVoidAsync("bindAppSelectChange");
        }
    }
}

然后在你的.js文件里把绑定代码封装成一个函数：

function bindAppSelectChange() {
    $(document).on('change', '#AppSelect', function () {
        $(this).closest('form').find("input[type=text], textarea").val("");
    });
}

这样就能保证在组件第一次渲染完成后，再执行jQuery的事件绑定，完美匹配Blazor的渲染时机。

4. 额外提示：优先用Blazor原生方式处理（可选） #

其实Blazor本身就支持绑定下拉框的变更事件，没必要非得用jQuery，这种方式更符合Blazor的MVVM思想，还能避免DOM操作冲突：

<select id="AppSelect" class="form-control form-control-sm border border-secondary" 
        @onchange="HandleAppSelectChange">
    <option value="-">--- Select ---</option>
    <option value="-">Books</option>
</select>

然后在组件代码里添加：

private void HandleAppSelectChange(ChangeEventArgs e)
{
    // 直接操作绑定的模型，自动同步到输入框
    for (int i = 0; i < booksmod.Id.Count; i++)
    {
        booksmod.Id[i] = string.Empty;
        booksmod.Name[i] = string.Empty;
    }
}

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