jQuery动态复选框/单选框回显异常：无法访问动态元素

问题场景 #

表单中的复选框通过AJAX从数据库动态加载生成，部分父复选框带有子单选框，勾选父框可显示子项，生成逻辑正常。但点击编辑按钮回显已保存数据时，后台通过ClientScript.RegisterStartupScript调用populateCaseFileSummaries函数，控制台提示目标元素undefined，无法完成勾选回显。

核心原因 #

执行时机不匹配：后台注册的启动脚本会在页面加载完成后立即执行，但动态控件是通过异步AJAX请求生成的，AJAX的success回调（渲染DOM）执行时间晚于启动脚本，此时目标控件还未被添加到DOM中，自然无法找到。

解决方法 #

方案一：将回显逻辑放在动态控件渲染完成后执行 #

把回显需要的数据存储在页面隐藏域中，待AJAX渲染完控件后再调用回显函数：

1. 后台将回显数据写入隐藏输入框：

// 后台代码，把保存的父/子ID列表存入隐藏域
this.Page.ClientScript.RegisterHiddenField("hdnParentCaseFileIds", LIST_Minor_Casefile_Info);
this.Page.ClientScript.RegisterHiddenField("hdnChildCaseFileIds", LIST_Minor_Casefile_Info_Sub);

2. 修改DrawMinorCaseFileCheckboxList的AJAX success回调，在DOM渲染完成后触发回显：

function DrawMinorCaseFileCheckboxList() {
    $.ajax({
        type: "Post",
        url: "UACWebServices.asmx/GetMinorCaseFileTree",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            var obj = JSON.parse(data.d);
            var parentDivData = '<div class="container">';
            // 原有的DOM拼接逻辑...
            $('#dCaseFile').html(parentDivData);

            // 渲染完成后执行回显
            var parentIds = $('#hdnParentCaseFileIds').val();
            var childIds = $('#hdnChildCaseFileIds').val();
            if (parentIds) {
                populateCaseFileSummaries(parentIds, childIds);
            }

            // 原有的change事件绑定逻辑...
        }
    });
}

方案二：让后台脚本等待动态控件生成完成 #

给动态生成函数添加回调机制，确保回显逻辑在控件渲染后执行：

1. 修改DrawMinorCaseFileCheckboxList，支持传入回调函数：

function DrawMinorCaseFileCheckboxList(callback) {
    $.ajax({
        type: "Post",
        url: "UACWebServices.asmx/GetMinorCaseFileTree",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            // 原有的DOM拼接、事件绑定逻辑...
            $('#dCaseFile').html(parentDivData);
            // ...事件绑定代码

            // 执行回调，触发回显
            if (typeof callback === 'function') {
                callback();
            }
        }
    });
}

2. 后台修改注册脚本，将回显函数作为回调传入：

ClientScript.RegisterStartupScript(this.GetType(), "populateCaseFileSummaries", 
    "DrawMinorCaseFileCheckboxList(function(){ populateCaseFileSummaries('" + LIST_Minor_Casefile_Info + "', '" + LIST_Minor_Casefile_Info_Sub + "'); });", 
    true);

注意：需确保页面不会重复调用DrawMinorCaseFileCheckboxList，避免重复渲染控件。

方案三：优化回显函数的元素查找与触发逻辑 #

在回显函数中增加元素存在性检查，并触发父复选框的change事件以显示子项：

function populateCaseFileSummaries(parentCheckbox, childRadioBtn) {
    // 去除ID中的多余空格，避免选择器错误
    var parentItems = parentCheckbox.split(",").map(item => item.trim());
    $.each(parentItems, function (index, value) {
        var $parentCheckbox = $("#spCasefileSummaries_" + value);
        if ($parentCheckbox.length > 0) {
            $parentCheckbox.prop("checked", true);
            // 触发change事件，自动显示子单选框列表
            $parentCheckbox.trigger("change");
            console.log("父复选框已勾选: " + value);
        } else {
            console.log("未找到父复选框: #spCasefileSummaries_" + value);
        }
    });

    var childItems = childRadioBtn.split(",").map(item => item.trim());
    $.each(childItems, function (index, value) {
        var $childRadio = $("#minor-casefile-info_" + value);
        if ($childRadio.length > 0) {
            $childRadio.prop("checked", true);
            console.log("子单选框已勾选: " + value);
        } else {
            console.log("未找到子单选框: #minor-casefile-info_" + value);
        }
    });
}

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