在 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

您没有正确使用事件委托。您传递给 .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 中第二次尝试后表单提交无效

Form submit not working after second attempt in jQuery AJAX

javascript

php

ajax

jquery

codeigniter-2