基于Laravel7+jQuery：动态表格新增行实现产品价格联动显示

问题核心是动态新增的DOM元素没有绑定事件监听，初始代码只给页面加载时存在的第一个选择框绑定了change事件，后续新增的行无法触发联动逻辑。下面是具体修改方案：

1. 修改jQuery事件绑定方式（关键） #

将直接绑定元素事件改为事件委托，把事件监听绑定到静态存在的父容器上（比如表格tbody），这样后续动态添加的子元素也能触发事件。

原错误代码示例（仅第一行有效） #

// 仅绑定初始加载的第一个select元素
$('select.product').change(function() {
    let productId = $(this).val();
    let price = getProductPrice(productId);
    // 直接选中全局第一个input.price，导致所有行价格同步错误
    $('input.price').val(price);
});

修改后的正确代码 #

// 事件委托到静态父容器（比如表格tbody）
$('#dynamic-table tbody').on('change', 'select.product', function() {
    let $currentSelect = $(this);
    let productId = $currentSelect.val();
    
    // 方式一：从预加载的产品数据中获取价格（推荐，减少AJAX请求）
    // 提前在Blade模板中注入产品数据
    let price = products.find(item => item.id == productId)?.price || '';
    
    // 方式二：通过AJAX请求后端获取价格（按需使用）
    // $.get(`/products/${productId}/price`, function(data) {
    //     $currentSelect.closest('tr').find('input.price').val(data.price);
    // });
    
    // 定位到当前行的价格输入框，避免影响其他行
    $currentSelect.closest('tr').find('input.price').val(price);
});

2. 确保动态新增行的结构正确 #

新增行时要保证每行的select和input有对应的class（product和price），同时清空继承的选中状态和输入值：

// 新增行的示例逻辑
$('#add-row-btn').click(function() {
    let $newRow = $('#dynamic-table tbody tr:first').clone();
    // 清空新行的选择框和价格输入框
    $newRow.find('select.product').val('');
    $newRow.find('input.price').val('');
    // 添加到表格末尾
    $('#dynamic-table tbody').append($newRow);
});

3. Laravel后端数据注入优化 #

在Blade模板中预加载产品数据到前端，避免每次选择都发起AJAX请求：

<!-- 在页面脚本前注入产品数据 -->
<script>
    const products = {!! $products->select('id', 'name', 'price')->toJson() !!};
</script>

关键逻辑说明 #

• 事件委托利用DOM事件冒泡机制，父容器能监听所有子元素的事件，包括动态新增的元素。
• 使用closest('tr')精准定位当前选择框所在行，确保价格输入框的修改只作用于当前行，不会干扰其他行的数据。

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