# Django 3.2.11.dev 文档

# 管理的 JavaScript 自定义

## 内联表单事件

当一个内联表单在管理更改表单中被添加或删除时，你可能想执行一些 JavaScript。`formset:add` 和 `formset:remove` 的 jQuery 事件允许这样做。事件处理程序被传递给三个参数：

- `event` 是 `jQuery` 事件。
- `$row` 是新增加（或删除）的行。
- `formsetName` 是该行所属的表单集。

该事件使用 django.jQuery 命名空间 来启动。

在你的自定义 `change_form.html` 模板中，扩展 `admin_change_form_document_ready` 块并添加事件监听器代码：

    {% extends 'admin/change_form.html' %}
    {% load static %}

    {% block admin_change_form_document_ready %}
    {{ block.super }}
    <script src="{% static 'app/formset_handlers.js' %}"></script>
    {% endblock %}

app/static/app/formset_handlers.js

    (function($) {
        $(document).on('formset:added', function(event, $row, formsetName) {
            if (formsetName == 'author_set') {
                // Do something
            }
        });

        $(document).on('formset:removed', function(event, $row, formsetName) {
            // Row removed
        });
    })(django.jQuery);

有两点需要注意：

- 如果你继承了 `admin/change_form.html`，JavaScript 代码必须放在模板块中，否则它不会在最终的 HTML 中呈现。
- 添加 `{{ block.super }}` 是因为 Django 的 `admin_change_form_document_ready` 块中包含了 JavaScript 代码，用于处理更改表单中的各种操作，而我们也需要渲染这些代码。

有时你需要使用没有在 `django.jQuery` 命名空间注册的 `jQuery` 插件。要做到这一点，改变代码监听事件的方式。不在 `django.jQuery` 命名空间中封装监听器，而是监听从那里触发的事件。比如说：

    {% extends 'admin/change_form.html' %}
    {% load static %}

    {% block admin_change_form_document_ready %}
    {{ block.super }}
    <script src="{% static 'app/unregistered_handlers.js' %}"></script>
    {% endblock %}

app/static/app/unregistered_handlers.js

    django.jQuery(document).on('formset:added', function(event, $row, formsetName) {
        // Row added
    });

    django.jQuery(document).on('formset:removed', function(event, $row, formsetName) {
        // Row removed
    });