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

如果没有该元素，则无法进行更改。

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

5 个答案: