HTMX加载Django模态框后JS变量重复声明致动态表单集失效

用Django+HTMX在模态框里加载表单集，照着《Dynamically Add Forms in Django with Formsets and JavaScript》教程写了原生JS实现动态添加表单功能。现在碰到两个问题：

1. 第一次打开模态框一切正常，第二次打开就报Uncaught SyntaxError: Identifier 'ingredientForm' has already been declared，动态添加表单直接失效。
2. 表单保存完只能硬刷整页，想改成不用刷新的流程。

1. 变量重复声明：你用let/const声明的ingredientForm是全局变量，模态框关闭后这个变量不会自动销毁，第二次加载表单集时重复声明就触发语法错误了。
2. 无刷新提交没做：当前表单用的是浏览器默认提交逻辑，没利用HTMX的异步提交特性，所以只能整页跳转。

一、修复变量重复声明问题 #

方案1：用函数作用域包裹JS逻辑 #

把动态表单的所有代码放进一个函数里，每次加载模态框时调用这个函数，变量就被限制在函数作用域内，不会污染全局：

// 全局JS文件里定义初始化函数
function initIngredientFormset() {
  // 原来的ingredientForm相关逻辑全放这里
  const ingredientForm = document.getElementById('ingredient-formset');
  const addButton = document.getElementById('add-ingredient-btn');
  let formCount = parseInt(ingredientForm.dataset.formCount);

  addButton.addEventListener('click', function() {
    // 动态添加表单的逻辑...
    formCount++;
    // ...
  });
}

然后在模态框的局部模板末尾加调用：

<script>
  initIngredientFormset();
</script>

或者用HTMX的htmx:afterSwap事件全局监听，自动触发初始化：

document.body.addEventListener('htmx:afterSwap', (event) => {
  // 只在表单集模态框加载完成后执行
  if (event.target.id === 'modal-content' && event.detail.xhr.url.includes('your-formset-load-url')) {
    initIngredientFormset();
  }
});

方案2：关闭模态框时清理变量和事件 #

监听模态框关闭事件，把相关变量置空，同时移除事件监听（避免重复绑定）：

// 假设用的是Bootstrap模态框，监听hidden事件
document.getElementById('ingredient-modal').addEventListener('hidden.bs.modal', () => {
  // 清理全局变量
  if (typeof ingredientForm !== 'undefined') {
    ingredientForm = null;
  }
  // 移除添加按钮的事件监听（通过克隆节点重置）
  const addBtn = document.getElementById('add-ingredient-btn');
  if (addBtn) {
    const newAddBtn = addBtn.cloneNode(true);
    addBtn.replaceWith(newAddBtn);
  }
});

方案3：用立即执行函数（IIFE） #

把表单集的JS直接放在IIFE里，每次加载模板时自动执行，变量被锁在函数内部：

<!-- 表单集局部模板里的JS -->
<script>
(function() {
  const ingredientForm = document.getElementById('ingredient-formset');
  const addButton = document.getElementById('add-ingredient-btn');
  let formCount = parseInt(ingredientForm.dataset.formCount);

  // 动态添加/删除表单的逻辑...
})();
</script>

二、实现无刷新保存表单集 #

1. 给表单加HTMX提交属性 #

修改表单标签，用HTMX异步提交，指定提交后的内容替换目标：

<form hx-post="{% url 'save-ingredient-formset' %}" 
      hx-target="#modal-content" 
      hx-swap="innerHTML">
  {{ formset.management_form }}
  <!-- 渲染表单集中的每个表单 -->
  {% for form in formset %}
    <div class="form-row">{{ form.as_p }}</div>
  {% endfor %}
  <button type="submit">保存</button>
</form>

2. 调整Django视图返回局部模板 #

处理表单提交后，返回更新后的表单集局部模板（成功就返回空表单集+提示，失败返回带错误的表单）：

def save_ingredient_formset(request):
    if request.method == 'POST':
        formset = IngredientFormSet(request.POST)
        if formset.is_valid():
            formset.save()
            # 保存成功，返回空表单集+成功提示
            return render(request, 'ingredient_formset_partial.html', {
                'formset': IngredientFormSet(),
                'success_msg': '保存成功！'
            })
        else:
            # 验证失败，返回带错误的表单集
            return render(request, 'ingredient_formset_partial.html', {
                'formset': formset
            })
    # GET请求返回空表单集
    formset = IngredientFormSet()
    return render(request, 'ingredient_formset_partial.html', {'formset': formset})

3. 保存成功后自动关闭模态框 #

可以在返回的局部模板里加一段JS，延迟关闭模态框：

{% if success_msg %}
<div class="alert alert-success">{{ success_msg }}</div>
<script>
  setTimeout(() => {
    document.getElementById('ingredient-modal').modal('hide');
  }, 1500);
</script>
{% endif %}

或者用HTMX的全局事件监听，提交成功后直接关闭：

document.body.addEventListener('htmx:afterRequest', (event) => {
  if (event.detail.xhr.url.includes('save-ingredient-formset') && event.detail.successful) {
    document.getElementById('ingredient-modal').modal('hide');
    // 可选：刷新页面上的食材列表（如果有的话）
    htmx.trigger('#ingredient-list', 'refresh');
  }
});

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