解决 Django-Formset 按钮无响应问题：一步步教程-js教程-PHP中文网

解决 Django-Formset 按钮无响应问题：一步步教程

碧海醫心

发布： 2025-10-13 12:24:15

原创

868人浏览过

解决 django-formset 按钮无响应问题：一步步教程

本文旨在解决在使用 Django-Formset 库时，按钮（如添加、提交等）无响应的问题。通过引入必要的 JavaScript 文件，使 Django-Formset 的内置函数生效，从而恢复按钮的正常功能。本文提供了一个简单的示例，并详细说明了如何在模板中正确引入所需的静态文件。

在使用 Django-Formset 构建动态表单时，可能会遇到按钮点击无反应的问题。这通常是由于缺少必要的 JavaScript 文件，导致 Django-Formset 的内置函数无法正常工作。以下是解决此问题的详细步骤。

问题分析

Django-Formset 依赖一些内置的 JavaScript 函数来处理表单提交和其他交互。这些函数通过 click 属性与按钮关联。如果这些 JavaScript 文件没有正确加载，按钮将无法响应点击事件。

解决方案

解决此问题的关键在于确保在 HTML 模板中正确引入 django-formset.js 文件。这个文件包含了所有必要的 JavaScript 函数，使 Django-Formset 能够正常工作。

具体步骤

在 HTML 模板中加载静态文件：

打开你的 HTML 模板文件（例如 customer-edit.html），并在 <head> 标签内添加以下代码：
```
{% load i18n %}
{% load static %}

<html lang="en">
  <head>
    ...
    <script
      type="module"
      src="{% static 'formset/js/django-formset.js' %}"
    ></script>
  </head>

  <body>
    ...
  </body>
</html>
```
登录后复制
代码解释：
- {% load static %}：加载 Django 的静态文件标签。
- <script type="module" src="{% static 'formset/js/django-formset.js' %}"></script>：引入 django-formset.js 文件。type="module" 属性表明这是一个 ES 模块，允许使用 import 和 export 语句。{% static 'formset/js/django-formset.js' %} 使用 Django 的 static 标签来获取静态文件的 URL。
确认静态文件配置：

确保你的 settings.py 文件中正确配置了静态文件。通常，你需要设置 STATIC_URL 和 STATICFILES_DIRS。例如：
```
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / 'static',
]
```
登录后复制
解释：

猫眼课题宝
5分钟定创新选题，3步生成高质量标书！

85

查看详情
- STATIC_URL：定义了静态文件的 URL 前缀。
- STATICFILES_DIRS：指定了静态文件所在的目录。
收集静态文件：

运行以下命令来收集所有静态文件到 STATIC_ROOT 目录（如果已配置）。
```
python manage.py collectstatic
```
登录后复制
注意： 在生产环境中，你需要配置 Web 服务器（如 Nginx 或 Apache）来提供静态文件服务。
检查按钮代码：

确认你的按钮代码使用了正确的 click 属性，并且属性值符合 Django-Formset 的语法。例如：
```
<button type="button" click="submit({add: true}) -> proceed">{% trans "Add" %}</button>
```
登录后复制
解释：
- click="submit({add: true}) -> proceed"：指定了点击按钮时执行的 JavaScript 函数。submit({add: true}) 表示提交表单，并将 add 设置为 true。-> proceed 表示提交成功后继续执行后续操作。

完整示例

以下是一个完整的 customer-edit.html 示例：

{% load i18n %}
{% load static %}
{% load render_form from formsetify %}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script
      type="module"
      src="{% static 'formset/js/django-formset.js' %}"
    ></script>
  </head>
  <body>
    <django-formset endpoint="{{ request.path }}" csrf-token="{{ csrf_token }}">
      {% render_form form %} {% if add %}
      <button type="button" click="submit({add: true}) -> proceed">
        {% trans "Add" %}
      </button>
      {% else %}
      <button type="button" click="submit({update: true}) -> proceed">
        {% trans "Update" %}
      </button>
      <button type="button" click="submit({delete: true}) -> proceed">
        {% trans "Delete" %}
      </button>
      {% endif %}
    </django-formset>
  </body>
</html>

登录后复制

注意事项