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

Question

我正在尝试通过 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);
    });
});

知道为什么吗？

Answer 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)），它非常适合调试