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

Adding a loader after clicking submit button on a form (loader keeps repeating)

本文关键字：加载 程序 添加 表单 单击 提交 按钮      更新时间：2023-09-26

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

我觉得好像我做得很糟糕，因为加载器的行为很奇怪，有时它只会显示一次，但有时它会重复，而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是无效的吗?我的方法过时了吗?有什么更有效的方法来做这件事?(我不想要完整的代码，我只需要在正确的方向上引导我做错了什么)。

您可以在这里看到一个实时示例。如果您上传了一张图片，然后点击提交(忽略其他字段)，您将看到有问题的图片加载器

问题是每次点击你都在添加一个新图像，你也在添加多个提交处理程序

$(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();
    });
});
相关文章：