javascript - 单击表单上的提交按钮后添加加载程序(加载程序不断重复)

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 无效吗？我的方法过时了吗？什么是更有效的方法来解决这个问题？ (我不需要完整的代码，我只需要引导我知道我做错了什么)。

您可以查看一个实例 here 。如果您上传图像，然后单击“提交”(忽略其他字段)，您将看到有问题的图像加载器。

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