动态添加填充Input在新版Firefox失效，求适配解决方案

代码基于PHP/JavaScript/HTML开发，在Windows 7 + Firefox 115.34.1esr（32位）环境下可正常动态添加Input并填充内容；但在Windows 10/11 + Firefox 150.0.2（64位）环境中，Input能正常添加，却无法填充数据。

代码执行逻辑：选择下拉框select_ofic的office选项时，触发myFunction_debt()，通过AJAX请求count_month.php从MySQL的monthtotal表获取对应office的未付款月份数据；随后调用Add_Inputs()加载DinamyInputsdebt.php动态生成Input；最后调用FillupInputs()将office_id、yearmonth等值填充到对应Input中。

核心问题根源分析 #

1. 异步加载时序问题：Add_Inputs()中使用$.load()动态加载Input是异步操作，但myFunction_debt()调用Add_Inputs()后立即执行FillupInputs()，此时动态Input还未完全渲染到DOM中。新版Firefox的异步处理时序更严格，导致填充时找不到对应元素。
2. 重复函数定义覆盖：代码中存在两个同名的FillupInputs函数，第二个函数会覆盖第一个，且第一个函数的参数与实际调用不匹配，导致逻辑混乱。
3. PHP未初始化变量：count_month.php中$yearmonthd未提前初始化，无数据时会触发警告，可能导致JSON输出异常。
4. 重复ID冲突：DinamyInputsdebt.php中生成的Input使用了重复的id属性，新版浏览器对重复ID的DOM选择行为更严格，可能导致选择器失效。

修复方案 #

1. 移除重复的FillupInputs函数 #

删除index.php中未被使用的第一个FillupInputs函数，保留实际调用的版本：

// 移除这段无用的函数定义
// function FillupInputs(inputs_counter,name) {
//     //read yearmonth and populate inputs
//     $('#yearmonth').val(document.getElementById("datepicker2").value);
//     for (let i = 0; i < inputs_counter; i++) {
//         $('input[name="expense_select[]"]').eq(i).val(id_yearmonths[i]);
//         $("#datepicker2").prop("readonly", true);
//         //Disable Input datepicker2 
//         $("#datepicker2").attr('disabled', !$("#datepicker2").attr('disabled'));
//         $("#datepicker2").removeClass("grey");
//     }   
// }

2. 解决异步加载的时序问题 #

修改Add_Inputs()，用Promise等待所有动态Input加载完成后再触发填充逻辑，同时调整myFunction_debt()的调用方式：

function Add_Inputs(quantity) {
    $('#head').text('Months (Uncheck If you want):');
    const loadPromises = [];
    for (let i = 0; i < quantity; i++) {
        const promise = new Promise((resolve) => {
            $("<div>").load("DinamyInputsdebt.php", function() {
                $("#YearMonthsInputs").append($(this).html());
                resolve();
            });
        });
        loadPromises.push(promise);
    }
    return Promise.all(loadPromises);
}

function myFunction_debt(office_id){
    // 清空之前的动态Input，避免重复生成
    $("#YearMonthsInputs").empty();
    $.ajax({
        url: 'librerias/php/count_month.php',
        type: 'POST',
        dataType: 'json',
        data:{office_id:office_id},
        success: function(data)
        {                   
            alert("Months: "+data.quantity);
            // 等待所有Input加载完成后再填充
            Add_Inputs(data.quantity).then(() => {
                FillupInputs(data.quantity, data.office_id, data.yearmonthd);
            });
        },
        error: function(errorThrown)
        {
            alert(errorThrown);
        }
    });
}

3. 修复PHP未初始化变量问题 #

在count_month.php中提前初始化$yearmonthd数组：

// 初始化数组，避免未定义变量警告
$office_id = array();
$yearmonthd = array();

//find months status=0
$sql = "SELECT * FROM monthtotal WHERE office_id = '$office_id' AND payment_status=0";
$result = $connect->query($sql);

//If find months
if (mysqli_num_rows($result) > 0) {
    while($row = mysqli_fetch_assoc($result)) { 
        $office_id[] = $row['office_id'];           
        $yearmonthd[] = $row['yearmonth'];      
    }
    $Totalarray = array('quantity' => $quantity, 'office_id' => $office_id, 'yearmonthd' => $yearmonthd);
    exit(json_encode($Totalarray));
}

4. 移除重复的ID属性 #

修改DinamyInputsdebt.php，删除重复的id属性（动态生成多个元素时ID必须唯一，无需保留）：

<div class="row">                           
    <div class="col col-lg-2">
        <input type="checkbox" style="color: blue; background-color:#DDFF33; text-align:left; font-weight: bold" class="form-control" name="expense_select[]" value="" checked><br>
    </div>
    <div class="col-md-auto">
        <input type="text" style="color: blue; background-color:#FFFACD; text-align:left; font-weight: bold" class="form-control" name="yearmonthd[]" value="">
        <input type="hidden" style="color: blue; background-color:#DDFF33; text-align:left; font-weight: bold" class="form-control" name="office_id[]">
    </div>
</div> 

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