# Django 5.0.9.dev20240806133106 ドキュメント

# admin アプリケーションの JavaScript カスタマイズ

## インラインフォームイベント

インラインフォームが admin アプリケーション変更フォームに追加または削除された際に JavaScript を実行したい場合、`formset:added` と `formset:removed` イベントを使用できます。`event.detail.formsetName` は行が属するフォームセットを示します。 `formset:added` イベントでは、`event.target` は新しく追加された行です。

カスタムの `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`

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

注意点が2つあります:

- もし `admin/change_form.html` を継承しているなら、JavaScript コードはテンプレートブロック内に配置する必要があります。そうしないと、最終的な HTML にレンダリングされません。
- Django の `admin_change_form_document_ready` ブロックには、変更フォーム内でのさまざまな操作を処理するための JavaScript コードが含まれており、 `{{ block.super }}` は、それらもレンダリングする必要があるために追加されています。

### バージョン4.1より前のDjangoをサポートする

もしイベントリスナーが古いバージョンのDjangoをサポートする必要がある場合は、jQueryを使用してイベントリスナーを登録する必要があります。jQueryはJavaScriptイベントを処理しますが、その逆は成り立ちません。

`event.detail.formsetName` の存在をチェックし、次のように古いリスナーのシグネチャにフォールバックできます:

    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)
        }
    })