动态表格新增行后Ajax获取库存价格异常问题求助

问题描述 #

现有一个库存列表HTML表格，通过JavaScript实现行的新增与删除功能；每行的下拉选择框从MySQL数据库获取库存ID，选择时通过Ajax POST请求获取对应价格并显示在第三列单元格中。当前问题为：新增行后，选择不同行的下拉选项时，所有行的价格区域内容完全相同，需修复此问题使Ajax能正确获取对应行的库存价格。

原有代码 #

行新增与删除代码 #

function addRow(dataTable) {
"use strict";
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
if(rowCount < 20){
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;}  
}else{
     alert("En fazla 20 satır ekleyebilirsiniz.");
           
}
}

function deleteRow(dataTable) {
"use strict";
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if(null !== chkbox && true === chkbox.checked) {
        if(rowCount <= 1) {
            alert("Tüm satırları silemezsiniz.");
            break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
    }
}
    }

Ajax价格获取代码 #

$(document).ready(function(){
$("#tek_ice_stok_id").on('change',function(){
    var row = $(this).closest("tr");
    var tek_ice_stok_id = row.find(".tek_ice_stok_id").val();
    var tek_ice_birim_fiyat = row.find(".tek_ice_birim_fiyat").val();
    var dataString = "tek_ice_stok_id="+tek_ice_stok_id; 

  $.ajax({ 
    type: "POST", 
    url: "stok_fiyat_cek.php", 
    data: dataString, 
    success: function(result){ 
      row.find("td:eq(3)").html(result);
      
    }
  });
});
  })();

问题根源 #

1. ID唯一性冲突：原代码使用ID选择器#tek_ice_stok_id绑定事件，但HTML中ID必须唯一。新增行时直接复制第一行的innerHTML，导致所有下拉框都带有相同ID，违反规则且仅第一行的事件绑定生效。
2. 静态事件绑定失效：直接绑定到#tek_ice_stok_id的change事件仅对页面加载时存在的元素生效，动态新增的行无法触发该事件，导致后续行的选择操作无法正确触发Ajax请求。

修复方案 #

1. 修改HTML元素标识：ID改为类名 #

将初始行中的下拉框id="tek_ice_stok_id"修改为class="tek_ice_stok_id"，确保元素标识可复用：

<select class="tek_ice_stok_id">
    <!-- 数据库加载的库存选项 -->
</select>

2. 修正新增行函数：移除重复ID #

在新增行时，复制第一行内容后移除ID属性，避免重复：

function addRow(dataTable) {
    "use strict";
    var table = document.getElementById("dataTable");
    var rowCount = table.rows.length;
    if(rowCount < 20){
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            // 复制内容并移除所有ID属性
            var originalContent = table.rows[0].cells[i].innerHTML;
            newcell.innerHTML = originalContent.replace(/id="[^"]*"/g, '');
        }  
    }else{
         alert("En fazla 20 satır ekleyebilirsiniz.");
    }
}

3. 改为事件委托绑定Ajax事件 #

使用事件委托绑定到表格（或更上层元素），确保动态生成的行也能触发事件：

$(document).ready(function(){
    // 绑定到表格元素，监听子元素的change事件
    $("#dataTable").on('change', '.tek_ice_stok_id', function(){
        var row = $(this).closest("tr");
        var tek_ice_stok_id = $(this).val(); // 直接获取当前选择框的值，更高效
        var dataString = "tek_ice_stok_id="+tek_ice_stok_id; 

        $.ajax({ 
            type: "POST", 
            url: "stok_fiyat_cek.php", 
            data: dataString, 
            success: function(result){ 
                row.find("td:eq(3)").html(result);
            }
        });
    });
});

优化说明 #

• 事件委托绑定到#dataTable而非document，可以减少事件冒泡层级，提升性能。
• 直接通过$(this).val()获取当前选择框的值，无需再通过row.find查找，简化代码逻辑。

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