javascript - 在 jQuery AJAX 中第二次尝试后表单提交不起作用

Question

我的项目中有一个表单将通过 jQuery AJAX 提交。

数据将在服务器端进行验证，如果数据无效，它将加载带有验证错误的表单并将该 HTML 附加到 div。

在下次尝试提交表单时，它会直接重定向到表单操作 URL，即 event.preventDefault() 不工作。

这是我的代码:

initFormSubmit: function () {
                var form = $('form#forum');
                $(document).on('submit', form, function (event) {
                    event.preventDefault();

                    if ($(this).attr('name')) {
                        form.append(
                                $("<input type='hidden'>").attr({
                            name: $(this).attr('name'),
                            value: $(this).attr('value')})
                                );
                    }

                    var formData = form.serialize();

                    $.ajax({
                        type: form.attr('method'),
                        url: form.attr('action'),
                        data: formData,
                        success: function (data) {
                            $('#respond').empty();

                            $('#respond').append(data);
                        }
                    });
                });

            }

数据 = 表单，如果无效则验证错误。

Answer 1

您没有正确使用事件委托(delegate)。您传递给 .on 的第二个参数是 form，它是一个 jQuery 对象。

对于事件委托(delegate)，第二个参数需要是一个字符串。由于它是一个对象，jQuery 假设它是作为 data 参数而不是 selector 参数传入的。 (如果您在处理程序中执行 console.log(event.data)，它应该显示表单对象)。

只需将处理程序更改为:

$(document).on('submit', 'form#forum', function (event) {

并确保将处理程序中的所有引用从 form 更改为 $(this)