AJAX在动态生成DIV中的工作原理及动态字段多次生效问题

你遇到的核心问题是动态生成元素的事件绑定失效——页面加载时直接绑定的事件只会作用于当时已存在的DOM元素，后续新增的动态元素并没有被绑定事件，所以只能触发一次。下面是针对性的解决方案：

核心思路：使用事件委托（Event Delegation） #

事件委托利用DOM的事件冒泡机制，把事件绑定到页面加载时就存在的静态父元素上，由父元素监听子元素的事件触发。这样不管子元素是初始就有的，还是后来动态生成的，都能正常触发对应的AJAX逻辑。

具体修改步骤 #

假设你原来的AJAX绑定代码是类似这样的（直接绑定到下拉框元素）：

$('.product-select').change(function() {
    // 你的AJAX请求逻辑，比如获取选中值、请求数据填充字段
    var productId = $(this).val();
    $.ajax({
        url: 'your-product-data.php',
        type: 'POST',
        data: {product_id: productId},
        success: function(response) {
            // 填充当前行的相关字段
            $(this).closest('.row').find('.product-price').val(response.price);
        }
    });
});

你需要把它改成事件委托的形式，绑定到一个静态的父容器上（比如你的最外层.mrg-top-20容器，这个是页面加载就存在的）：

// 绑定到静态父元素，监听动态生成的.product-select的change事件
$('.mrg-top-20').on('change', '.product-select', function() {
    var $currentSelect = $(this);
    var productId = $currentSelect.val();
    
    $.ajax({
        url: 'your-product-data.php',
        type: 'POST',
        data: {product_id: productId},
        success: function(response) {
            // 关键：通过当前下拉框定位到所在的动态行，避免填充错误的字段
            var $currentRow = $currentSelect.closest('[data-duplicate="add"]');
            $currentRow.find('.product-price').val(response.price);
            $currentRow.find('.product-stock').val(response.stock);
            // 其他需要填充的字段...
        },
        error: function(xhr, status, error) {
            console.error('AJAX请求失败:', error);
        }
    });
});

关键注意事项 #

• 选择合适的静态父元素：尽量选择距离目标元素最近的静态父容器（比如.mrg-top-20），而不是直接绑定到document，这样能减少事件冒泡层级，提升性能。
• 精准定位当前行：在AJAX成功回调里，必须通过触发事件的下拉框（$currentSelect）定位到当前所在的动态行（比如用closest('[data-duplicate="add"]')），确保数据填充到正确的行内。
• 保持类名一致性：动态生成的下拉框必须和事件委托里的选择器（比如.product-select）完全匹配，否则父元素无法监听到事件。

这样修改后，不管你动态添加多少行销售明细，每一行的下拉框都能正常触发AJAX联动，获取并填充对应的数据了。

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