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的$(document).on('submit'...事件监听器，也不再调用提交事件on应该使用与选择器匹配的未来元素。

编辑：

将表单提交按钮上的click事件绑定起作用。

$(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（无论如何）），它非常适合调试

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

1 个答案: