jQuery点击分组添加练习按钮时所有分组同步新增内容的问题排查

DevOps 小满

2026-10-3

问题原因

核心错误：点击事件中使用$(this).parents().find('.lista-esercizi')时，parents()会匹配按钮所有上层元素，find会命中页面内所有分组的练习列表容器，导致练习框被插入到全部分组
冗余逻辑：每次新建分组都遍历全部分组重新绑定添加练习按钮的点击事件，会导致旧按钮重复绑定，执行多次插入逻辑
变量错误：更新练习表单计数时错误使用了外层分组的计数变量form_idx，会导致表单索引计数异常

修复方案

推荐用事件委托处理动态生成的元素，不需要每次新增分组都单独绑定事件，修正后代码如下：

// 页面加载完成后统一绑定事件，仅执行一次
$(function() {
  // 绑定添加分组事件
  $('#addgroup').on("click", function(){
    var form_idx = $('#id_form-TOTAL_FORMS').val();
    var addgro = $('#form-gruppo-vuoto').html().replace(/__prefix__/g, form_idx);
    $('.lista-gruppi').append(addgro);
    $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
  });

  // 委托绑定所有分组的添加练习按钮点击事件，动态生成的按钮自动生效
  $(".lista-gruppi").on("click", ".addesercizio", function(){
    var form_ids = $('#id_form-TOTAL_FORMS').val();
    // 全局取练习模板，不需要从父级查找
    var addes = $('#form-esercizio-vuoto').html().replace(/__prefix__/g, form_ids);
    // 只查找当前按钮所属分组下的练习列表
    $(this).closest('.gruppo-container').find('.lista-esercizi').append(addes);
    // 用当前的练习计数更新表单总数
    $('#id_form-TOTAL_FORMS').val(parseInt(form_ids) + 1);
  });
});