动态表单价格自动填充问题求助：新增行功能失效

问题根因 #

常规的jQuery事件绑定（如$('.drug-select').change(...)）仅会作用于页面加载时已存在的DOM元素。动态新增的表单行是后续生成的，未被绑定事件，因此无法触发价格填充逻辑。

解决方法：使用事件委托 #

将事件绑定到静态父容器（页面加载时就存在的元素）上，依靠事件冒泡机制处理动态生成元素的事件。

修改后的jQuery代码 #

// 绑定事件到静态父容器，监听所有.drug-select的change事件
$('#form-container').on('change', '.drug-select', function() {
    // 获取当前选中药品的价格
    const selectedPrice = $(this).find('option:selected').data('price');
    // 定位当前行的价格输入框并填充值
    $(this).closest('.form-row').find('.price-input').val(selectedPrice);
});

关键注意事项 #

1. 统一DOM结构：新增表单行时，必须保证结构与初始行一致：

   • 药品选择框保留类名drug-select
   • 价格输入框保留类名price-input
   • 每一行用统一的容器类（如form-row）包裹，确保closest('.form-row')能精准定位当前行，避免干扰其他行。

   示例新增行的HTML结构：

   <div class="form-row">
       <select class="drug-select">
           <option value="1" data-price="15.8">XX药品</option>
           <option value="2" data-price="32.5">YY药品</option>
       </select>
       <input type="text" class="price-input" readonly>
       <button class="delete-row">删除</button>
   </div>
   

2. 静态父容器：确保所有表单行都包裹在一个页面加载时就存在的容器内（如<div id="form-container"></div>），这是事件委托生效的前提。

内容的提问来源于stack exchange，提问作者ELITE INTERNATIONAL LTD