DOM完全渲染后操作元素问题：jQuery编辑表单填充数据失效

我用JS和jQuery实现表单编辑功能，从后端获取数据后需按以下顺序渲染表单：

• 点击manual单选按钮，显示新表头字段、源表头选择框和类型复选框
• 填写新表头输入框
• 选择源表头：触发AJAX获取该表头的唯一值，为每个值生成旧值、新值两个输入控件
• 选择类型：manual模式下新值控件为输入框，MRSH模式下转为选择框
• 将后端返回的数据填充到对应的输入框或选择框中

目前最后一步填充数据的操作无法正常执行，核心原因是前面的DOM渲染（比如生成控件）依赖异步操作，当前代码未等待这些操作完成就执行了填充逻辑。

/**
 * Handle Edit Header in case of Manual
 * @param {Object} headerData
 * @param {string} columnName
 * @returns {void}
 */
function handleEditManual(headerData, columnName) {
    $("#manual").click();

    // Set Column Name Field
    $("#column-name").val(columnName);

    // Set the Type according to the incoming type
    let values = headerData.values;

    addMappingPart(headerData).then(addInputsOrSelects(headerData)).then(function () {
        switch (mode) {
            case "manual":
                fillInputFields(values);
                break;

            case "MRSH":
                fillSelectBoxes(values);
                break;
        }
    });
}

// Step 2: Fill input fields
function fillInputFields(values) {
    $(".source-inputs").each(function () {
        let sourceValue = $(this).data("value");
        let manualValue =
            values.find((value) => value.value === sourceValue).then ??
            null;
        $(this).next().find("input").val(manualValue);
    });
}

// Step 2: Fill input fields
function fillSelectBoxes(values) {
    $(".source-inputs").each(function () {
        let sourceValue = $(this).data("value");
        let mrsvId =
            values.find((value) => value.value === sourceValue).id ?? null;
        $(this).next().find("select").val(mrsvId).trigger("change");
    });
}

function addMappingPart(headerData) {
    let sourceHeader = headerData.source_header;

    return new Promise(function (resolve) {
        $("#source-header").val(sourceHeader).trigger("change");

        // Resolve the Promise to signal completion of Step 1
        resolve();
    });
}

function addInputsOrSelects(headerData) {
    let type = headerData.type ? true : false;
    let mrshId = headerData.mrsh_id ?? null;

    return new Promise(function (resolve) {
        // Simulate some time to add input fields
        if (type) {
            $("#type-switch").click();
            mode = "MRSH";

            // Set the MRSH if the Type is MRSH
            $("#select-mrsh").val(mrshId).trigger("change");
        } else {
            mode = "manual";
        }

        // Resolve the Promise to signal completion of Step 1
        resolve();
    });
}

核心问题 #

当前代码中的addMappingPart和addInputsOrSelects函数，在触发change事件后立即resolve Promise，但change事件通常会触发异步逻辑（比如AJAX请求、DOM生成），导致填充数据时目标DOM元素还未创建。

具体修复步骤 #

1. 等待源表头选择的异步逻辑完成
   改造addMappingPart，监听#source-header的change事件，等事件处理完成后再resolve：

function addMappingPart(headerData) {
    let sourceHeader = headerData.source_header;

    return new Promise(function (resolve) {
        // 先解绑重复的事件监听，避免多次触发
        $("#source-header").off("change.resolve").on("change.resolve", function() {
            $(this).off("change.resolve");
            resolve();
        });

        $("#source-header").val(sourceHeader).trigger("change");
    });
}

2. 等待MRSH选择的异步逻辑完成
   改造addInputsOrSelects，如果是MRSH模式，需等待#select-mrsh的change事件处理完成：

function addInputsOrSelects(headerData) {
    let type = headerData.type ? true : false;
    let mrshId = headerData.mrsh_id ?? null;

    return new Promise(function (resolve) {
        function finish() {
            resolve();
        }

        if (type) {
            $("#type-switch").click();
            mode = "MRSH";

            // 等待#select-mrsh的change事件处理完成
            $("#select-mrsh").off("change.resolve").on("change.resolve", function() {
                $(this).off("change.resolve");
                finish();
            });

            $("#select-mrsh").val(mrshId).trigger("change");
        } else {
            mode = "manual";
            finish();
        }
    });
}

3. 修正填充函数的语法错误
   fillInputFields中values.find(...)返回的是对象而非Promise，.then应为后端返回的实际字段名（比如manual_value）：

function fillInputFields(values) {
    $(".source-inputs").each(function () {
        let sourceValue = $(this).data("value");
        let matchedItem = values.find(item => item.value === sourceValue);
        let manualValue = matchedItem ? matchedItem.manual_value : null;
        $(this).next().find("input").val(manualValue);
    });
}

4. 优化选择框填充逻辑
   确保fillSelectBoxes能正确匹配数据：

function fillSelectBoxes(values) {
    $(".source-inputs").each(function () {
        let sourceValue = $(this).data("value");
        let matchedItem = values.find(item => item.value === sourceValue);
        let mrsvId = matchedItem ? matchedItem.id : null;
        $(this).next().find("select").val(mrsvId).trigger("change");
    });
}

内容的提问来源于stack exchange，提问作者Ahmed Alaa El-Din Hassan