单击表单上的submit按钮后添加加载程序(加载程序不断重复)

Question

我的目标是在点击后用图像加载器替换表单提交按钮，这样当上传的图像加载时，用户就不会只看一个空白屏幕。我做到了这一点，但这并不理想。

我觉得我做的事情很糟糕，因为加载程序的行为很奇怪，有时它只显示一次，但另一些则会被重复，而background-repeat: no-repeat没有任何效果。

这是我的jQuery：

$(document).ready(function() {
   $("input[name='application-submit']").hover(function() {
      $(this).toggleClass("btn-hover");
      $("form").submit(function() {
         $("input[name='application-submit']").after('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">');
         $("input[name='application-submit']").hide();
         $("img.loader").css("position", "relative", "top", "0", "left", "0");
      });
   });
});

我是不是做错了什么，使它使我使用的CSS是无效的？我的方法过时了吗？有什么更有效的方法来解决这个问题呢？(我不想要完整的代码，我只需要被引导到正确的方向，知道我做错了什么)。

您可以看到一个活生生的例子这里。如果您上传了一个图像，然后单击submit (忽略其他字段)，您将看到有问题的图像加载器。

Answer 1

问题是，每次单击都会添加一个新图像，还会添加多个提交处理程序。

$(document).ready(function () {
    var $btn = $("input[name='application-submit']").hover(function () {
        $(this).toggleClass("btn-hover");
    });
    $("form").submit(function () {
        var $img = $btn.next('.loader').show();
        if (!$img.length) {
            $img = $('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">').css({
                position: 'relative',
                top: 0,
                left: 0
            }).insertAfter($btn);
        }
        $btn.hide();
    });
});