AJAX：提交没有页面刷新的表单只能运行一次

Question

我正在使用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();
            });

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

提前谢谢了

Answer 1

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

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

尝试将setTimeout更改为：

var msgEl = $(".successORfail");
setTimeout(function() {
    msgEl.fadeOut("slow", function () {
        msgEl.empty().show();
    });
}, 4500);

Answer 2

您的成功事件处理程序

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

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

Answer 3

而不是删除元素，只需.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)访问元素，而不是根据类名重新选择它。

Answer 4

你能添加一些HTML片段吗？ 没有关于你的html结构的知识很难帮助，因为如果你通过$（'。successORfail'）替换表单.html（data）; 监听器不会重新绑定到表单。 您还应返回FALSE，因为表单数据是通过javascript发送的。

Answer 5

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

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

没有该元素，就无法进行更改。