问题描述
我的目标是在单击后用图像加载器替换表单提交按钮，以便在加载上载的图像时，用户不会只是看着空白屏幕。 我实现了这一点，但这并不理想。
我觉得我做得不好，因为加载程序的行为很奇怪，有时它只会显示一次，而其他的却会重复出现，并且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无效？ 我的方法过时了吗？ 有什么更有效的方法来解决这个问题？ （我不需要完整的代码，只需要针对我做错的事情向正确的方向发展即可）。
您可以看到一个实时示例。 如果您上传图像，然后单击提交（忽略其他字段），则会看到有问题的图像加载器。
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();
});
});