Django动态添加表单行后提交按钮异常问题求助

算力阿峰

2026-6-28

问题修复方案

1. 修正按钮事件绑定范围

核心问题大概率是提交按钮被误触发了添加行的JS逻辑——之前按钮不在row容器中时，选择器未命中，位置变更后触发了错误逻辑。

给添加行的按钮设置专属类名，比如add-product-row：

<button type="button" class="btn btn-primary add-product-row">添加产品行</button>

修改JS事件委托，仅针对该类按钮触发添加逻辑：

$(document).on('click', '.add-product-row', function(e) {
  e.stopPropagation();
  // 你的添加行逻辑代码
});

2. 明确提交按钮类型

确保提交按钮的type属性设为submit，避免与添加按钮的逻辑混淆：

<button type="submit" class="btn btn-success">提交表单</button>

3. 规范添加行函数的事件处理

在添加行的函数中，阻止事件冒泡和默认行为，避免影响表单提交：

function addRow(e) {
  e.preventDefault();
  e.stopPropagation();
  
  // 处理Django表单集的隐藏字段更新
  const totalForms = $('#id_product_set-TOTAL_FORMS');
  const formCount = parseInt(totalForms.val());
  
  // 克隆模板行并替换字段的__prefix__标记（Django表单集要求）
  const newRow = $('.form-row-template').clone().removeClass('form-row-template').show();
  newRow.find('[name], [id]').each(function() {
    const name = $(this).attr('name').replace('__prefix__', formCount);
    const id = $(this).attr('id').replace('__prefix__', formCount);
    $(this).attr({'name': name, 'id': id});
  });
  
  // 插入新行并更新表单总数
  $('#product-rows-container').append(newRow);
  totalForms.val(formCount + 1);
}