Javascript点击事件未触发，API加载更新模态框数据失败求助

我需要通过API拉取数据到UpdateModal中，但这段之前正常运行的代码现在突然失效了——相同代码在其他视图中可以正常触发，唯独在当前视图里完全没反应。

$("tbody").on('click', '#update', function () {
    $("#UpdateModal").modal("show");
    var id = $(this).data("id");
    console.log(id);
    $.ajax({
        type: 'Get',
        url: "/Users/GetUser?id=" + id,
        data: {
            "cusid": id
        },
        success: function (response) {
            console.log(response);
            console.log(response.data.userName);
            var departments = @Html.Raw(Json.Serialize(@ViewBag.departments));
            var duties = @Html.Raw(Json.Serialize(@ViewBag.duties));
            var roles = @Html.Raw(Json.Serialize(@ViewBag.roles));
            $('#UpdateModal #Id').attr('value', response.data.id);
            $('#UpdateModal #UserName').attr('value', response.data.userName);
            $('#UpdateModal #FirstName').attr('value', response.data.firstName);
            $('#UpdateModal #LastName').attr('value', response.data.lastName);
            $('#UpdateModal #Password').attr('value', response.data.password);


            $("#UpdateModal #DepartmentId option:first-child").prop("selected", "selected").text(response.data.departmentName);


            $("#UpdateModal #DutyId option:first-child").prop("selected", "selected").text(response.data.dutyName);
            $("#UpdateModal #RoleId option:first-child").prop("selected", "selected").text(response.data.roleName);

            if (response.data.isActive) {
                $("#UpdateModal #IsActive #true").prop("selected", "true")
                console.log(response.data.isActive);
            }
            else {
                $("#UpdateModal #IsActive #false").prop("selected", "false")
                console.log(response.data.isActive);
            }

            for (var i = 0; i < departments.length; i++) {
                if (response.data.departmentName == departments[i].departmentName) { $("#UpdateModal #DepartmentId option:first-child").prop("selected", "selected").val(departments[i].id); }
            }

            for (var i = 0; i < duties.length; i++) {
                if (response.data.dutyName == duties[i].dutyName) {
                    $("#UpdateModal #DutyId option:first-child").prop("selected", "selected").val(duties[i].id);
                }
            }

            for (var i = 0; i < roles.length; i++) {
                if (response.data.roleName == roles[i].roleName) { $("#UpdateModal #RoleId option:first-child").prop("selected", "selected").text(response.data.roleName).val(roles[i].id); }
            }
        }
    });
});

排查步骤与解决办法 #

• 检查元素选择器与ID冲突：打开浏览器控制台，执行$("#update")查看返回的元素数量，确认当前视图中只有一个目标按钮；执行$("tbody")验证是否能正确选中目标容器。如果存在多个#update，把ID改成类（比如.update），绑定事件时用$("tbody").on('click', '.update', ...)。
• 确保事件在DOM就绪后绑定：把代码包裹在$(document).ready(function(){ ... })中，避免DOM未渲染完成就执行绑定代码。
• 查看控制台报错：按F12打开开发者工具，检查Console面板是否有语法错误、jQuery未加载、变量未定义等报错。重点检查页面渲染后的源码中，departments、duties、roles这几个变量是否被正确生成为合法的JS数组。
• 验证API请求状态：切换到Network面板，点击按钮后查看是否有/Users/GetUser的请求发出。如果没有请求，说明事件绑定失败；如果有请求，检查响应状态码（比如404、500）和返回内容是否符合预期。
• 检查模态框元素存在性：确认#UpdateModal内的表单元素（如#Id、#UserName）ID拼写正确，且确实存在于DOM中。
• 动态元素绑定修正：如果tbody或#update按钮是动态加载的，将事件绑定到更上层的静态容器（比如$(document).on('click', 'tbody #update', ...)），确保事件能委托到动态生成的元素上。

内容的提问来源于stack exchange，提问作者Sefa Köse