Django Admin中使用jQuery阻止默认提交后丢失保存功能的问题

我太懂你遇到的这个坑了！之前在Django Admin里搞自定义模态框时，我也踩过一模一样的问题——直接阻止表单提交再调用submit()，确实会丢掉那些“保存并添加另一个”“保存并继续编辑”的功能，核心原因是你没捕获到触发提交的具体按钮。

Django Admin的这些特殊保存按钮，是靠按钮的name属性（比如_save_and_add_another、_save_and_continue）来告诉后端要执行哪种操作的。你的原代码只存了表单对象，直接提交时并没有带上这些按钮的参数，后端自然不知道该走哪个分支逻辑。

给你两种可行的解决方案：

方案一：捕获触发按钮，模拟点击提交 #

这种方式最贴近原生逻辑，直接记录下用户点击的那个保存按钮，模态框确认后再模拟点击它：

// 全局变量存储触发提交的按钮
var targetSubmitBtn;

// 监听所有提交按钮的点击事件（而不是表单的submit事件）
django.jQuery('form').on('click', ':submit', function(event) {
    // 阻止按钮的默认提交行为
    event.preventDefault();
    // 记录下当前点击的按钮
    targetSubmitBtn = this;
    // 打开模态框
    modal.open();
});

// 模态框确认后的回调函数里执行提交
function confirmModal() {
    if (targetSubmitBtn) {
        // 模拟点击原按钮，这样会带上按钮的name和value参数
        django.jQuery(targetSubmitBtn).trigger('click');
        // 清空变量，避免重复提交
        targetSubmitBtn = null;
    }
}

方案二：保存按钮参数，添加隐藏字段后提交 #

如果模拟点击有兼容性问题，也可以把按钮的name和value存下来，模态框确认后添加到表单的隐藏字段再提交：

// 存储按钮的提交参数
var submitParams = {};

django.jQuery('form').on('click', ':submit', function(event) {
    event.preventDefault();
    // 记录按钮的name和value
    submitParams = {
        name: this.name,
        value: this.value
    };
    modal.open();
});

// 模态框确认提交
function confirmModal() {
    if (submitParams.name) {
        var $form = django.jQuery('form');
        // 先移除可能存在的同名隐藏字段，避免冲突
        $form.find('input[name="' + submitParams.name + '"]').remove();
        // 添加隐藏字段，把按钮的参数传递给后端
        $form.append(django.jQuery('<input>', {
            type: 'hidden',
            name: submitParams.name,
            value: submitParams.value
        }));
        // 提交表单
        $form.submit();
        // 清空参数
        submitParams = {};
    }
}

这两种方法都能完美保留Django Admin原生的保存选项功能，你可以根据自己的模态框逻辑选一个适配的就行。

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