---
title: "管理的 JavaScript 自定义"
version: 6.1
locale: zh-hans
source: https://docs.djangoproject.com/zh-hans/6.1/ref/contrib/admin/javascript/
canonical: https://djangodocs.dev/zh-hans/6.1/ref/contrib/admin/javascript/
---
# 管理的 JavaScript 自定义

## 内联表单事件

当在管理员更改表单中添加或移除内联表单时，你可能希望执行一些 JavaScript。`formset:added` 和 `formset:removed` 事件允许这样做。`event.detail.formsetName` 是该行所属的表单集。对于 `formset:added` 事件，`event.target` 是新添加的行。

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

```html+django
{% 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`*

```javascript
document.addEventListener('formset:added', (event) => {
    if (event.detail.formsetName == 'author_set') {
        // Do something
    }
});
document.addEventListener('formset:removed', (event) => {
    // Row removed
});
```

有两点需要注意：

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

### 支持早于 Django 4.1 的版本。

如果你的事件监听器仍然需要支持较旧版本的 Django，你必须使用 jQuery 注册你的事件监听器。jQuery 处理 JavaScript 事件，但反过来不成立。

你可以检查是否存在 `event.detail.formsetName`，然后按如下方式退回到旧的监听器签名：

```javascript
function handleFormsetAdded(row, formsetName) {
    // Do something
}

$(document).on('formset:added', (event, $row, formsetName) => {
    if (event.detail && event.detail.formsetName) {
        // Django >= 4.1
        handleFormsetAdded(event.target, event.detail.formsetName)
    } else {
        // Django < 4.1, use $row and formsetName
        handleFormsetAdded($row.get(0), formsetName)
    }
})
```