1

我正在使用 AJAX 在后台提交表单，而不刷新页面。我遇到的问题是我只能提交一次表单。提交一次后， on('submit') 功能不再起作用，并且我没有收到任何错误。这完全违背了使用 AJAX 提交表单的目的：/

           $(document).on('submit', '#myForm', function(e) {
                $.post('mail.php', $(this).serialize(), function (data) {
                    //SUCCESS
                    $('.successORfail').html(data);
                     setTimeout(function(){
                      $(".successORfail").fadeOut("slow", function () {
                        $(".successORfail").remove();
                      });
                    }, 4500);

                }).error(function() {
                    alert("Fatal Error: mail.php not found!");
                });
                e.preventDefault();
            });

我想知道是否有人遇到过类似的问题或知道如何解决这个问题？我希望能够多次提交表单，如果需要，在每次提交后更改表单输入值。

提前谢谢了

4

5 回答 5

2

您确定没有发生 AJAX 请求吗？看起来您正在.successORfail从页面中删除元素，因此在后续调用中没有任何内容可以附加。

检查您的控制台，您可能会注意到每次都发生 ajax 调用。

尝试将您的 setTimeout 更改为：

var msgEl = $(".successORfail");
setTimeout(function() {
    msgEl.fadeOut("slow", function () {
        msgEl.empty().show();
    });
}, 4500);
于 2013-01-09T13:51:38.293 回答
1

您的成功事件处理程序：

$('.successORfail').html(data);
setTimeout(function () {
  $(".successORfail").fadeOut("slow", function () {
    $(".successORfail").remove();
  });
}, 4500);

在元素 ( ) 中设置内容.successORfail，然后删除该元素。下次您提交表单时，会获得成功的响应，并且执行该功能时，该元素不再存在以设置内容，因此您不会看到任何更改。

于 2013-01-09T13:51:42.577 回答
1

与其删除元素，不如删除.hide()它，以便下次可以填充它。你.show()每次都需要它。

       $(document).on('submit', '#myForm', function(e) {
            $.post('mail.php', $(this).serialize(), function (data) {
                //SUCCESS
                $('.successORfail').html(data).show(); //<-- show

                 setTimeout(function(){
                  $(".successORfail").fadeOut("slow", function () {
                    $(this).hide(); //<-- hide
                  });
                }, 4500);

            }).error(function() {
                alert("Fatal Error: mail.php not found!");
            });
            e.preventDefault();
        });

同样在fadeOut()函数中，您可以访问元素$(this)而不是根据类名重新选择它。

于 2013-01-09T13:55:38.337 回答
0

你能添加一些 HTML 片段吗？如果不了解您的 html 结构，很难提供帮助，因为如果您通过 $('.successORfail').html(data); 替换表单；侦听器不会重新绑定到表单。您还应该返回 FALSE，因为表单数据是通过 javascript 发送的。

于 2013-01-09T13:51:41.177 回答
0

好吧，您似乎将结果附加到$('.successORfail').html(data);并删除它。取出以下内容，它应该可以多次工作......

$('.successORfail').remove();

没有那个元素，就无法做出改变。

于 2013-01-09T13:51:56.207 回答