jQuery 和 Django 表单验证重新加载和提交事件监听器

Posted 2023-02-24

【中文标题】jQuery 和 Django 表单验证重新加载和提交事件监听器

【英文标题】：jQuery and Django form validation re-load and submit event listener

【发布时间】：2013-09-05 19:41:01

【问题描述】：

我正在尝试通过 AJAX POST 请求保存/验证 django 表单。

第一次点击提交按钮时一切正常，但是，如果服务器端验证失败并且需要再次加载表单以便用户更新插入的内容，则事件侦听器不会捕获任何进一步提交事件并应用默认行为。

这是我在$(document).ready(function()下的相关代码

$(document).on('submit', '#myForm', function(event)

    event.preventDefault();

    $.ajax(
        url: 'ajax/saveForm/',
        data: $('#myForm').serialize(),
        type: 'POST'
    ).done(function(data) 
        $('#myForm').html(data);
    );
);

换句话说：一旦使用 $('#myForm').html(data); 指令替换了表单的 html 代码，尽管 jquery 的 on 事件侦听器应该与未来一起使用，但在提交事件上将不再调用 $(document).on('submit'...匹配选择器的元素。

编辑：

在表单提交按钮上绑定点击事件有效。

$(document).on('click', '#myFormSubmit', function(event)

    event.preventDefault();

    $.ajax(
        url: 'ajax/saveForm/',
        data: $('#myForm').serialize(),
        type: 'POST'
    ).done(function(data) 
        $('#myForm').html(data);
    );
);

知道为什么吗？

【参考方案1】：

我不能确定出了什么问题，但我感觉它与 done 方法有关（因为可能在失败的运行之后，它不知道该怎么做）。您可能需要明确告诉它在失败时该怎么做：

$('#myForm').on('submit', function(e) 
    e.preventDefault();
    var form = $(this);
    $.post(
        url: 'ajax/saveForm/',
        data: form.serialize(),
        success: function(response) 
                alert('yey!');
            ,
        error: function(response) 
                form.html(data);
            
    );
);

我还避免使用 $() 整个文档，使用 $.post 并将表单对象兑现为变量，但这些不应该有任何实际效果（它们只是约定）。告诉我这是否有效，我会尽力提供帮助。另外，尝试使用 chrome 开发工具（即 console.log(whatever)），它非常适合调试

【讨论】：

使用您的代码时出现同样的问题，我认为这里更多的是与 javascript 事件侦听器相关的问题。当使用 form.html(data) 指令替换表单的 html 代码时，on('submit' 事件捕获器不再捕获提交事件。

然后也许尝试将其绑定到不同的事件。 $('#mySubmitButton').on('点击' ...

将其绑定到提交按钮有效，但仍然无法弄清楚为什么它对表单提交事件不起作用。对我来说，绑定提交事件而不是点击事件更有意义；但是，仍然感谢您的帮助。 :)

没问题！我也不能确切地说为什么它不起作用，但你可以尝试打开 chrome 控制台并添加一个事件监听器，也许你会发现发生了什么