表单提交在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);
                        }
                    });
                });

            }

data =具有验证错误的表单，如果无效。

Answer 1

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

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

只需将处理程序更改为：

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

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

Answer 2

尝试在提交事件结束时使用event.preventDefault，如下所示：

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

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