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();
                }
           **}**

表单提交在jQuery AJAX中第二次尝试后无法正常工作

2 个答案: