Javascript 为按钮制作通用加载图标？

我正在尝试创建某种类型的“通用”加载指示器，它将显示在单击的按钮旁边。例如我有一个页面，有两个按钮，一个用于联系人表单，另一个用于订阅表单。我的第一个想法是通过jQuery在每个按钮旁边创建一个自定义div。但是，我试图避免在我的页面上出现错误的div

我试图使用的代码使加载指示器显示在按钮内部而不是外部。下面是带有JSFIDLE链接的代码：

CSS

jQuery

$('#contact-submit').click(function()
{   
    $(this).addClass('indicator');
});
$('#subscribe-submit').click(function()
{   
    $(this).addClass('indicator');
});

HTML

接触
订阅

也许你可以使用pseudo元素

：after

？例如：

.indicator {
    position: relative;
}
.indicator:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 3px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    background:url(http://www.graphicsoptimization.com/blog/wp-includes/images/go_examples/2008_05/indicator.gif) no-repeat;
}

---

免责声明：这种方法不适用于

按钮，因为这些元素不能包含内部内容。

就像Mike已经指出的那样，您正在将类附加到按钮本身，请尝试类似的方法并使用css，或者告诉我您想要在哪里放置指示器

$('#contact-submit').click(function()
{   
    $('<div class="indicator"></div>').appendTo($(this).parent());
});
$('#subscribe-submit').click(function() 
{   
    $('<div class="indicator"></div>').appendTo($(this).parent());
});

$（“#联系提交”）。单击（函数（）
{   
$（''）.appendTo（$（this.parent（））；
});
$（“#订阅提交”）。单击（函数（）
{   
$（''）.appendTo（$（this.parent（））；
});

---

哇，这正是我想要的！

：在

之后到底是什么？哪些浏览器与此兼容？感谢您的帮助：）

：after

和

：before

用于生成内容。它们受所有主流浏览器（IE8+）的支持。感谢您的免责声明，非常好的信息。这将帮助我制定自己的Twitter引导CSS样式；）很乐意帮忙。如果您需要支持IE7，您可以简单地使用简单的背景图像编写额外的CSS规则（IE7 hack），而不是花哨的

：在
背景之后。请注意，在
$.post（）内
成功函数
此
将不再引用您的按钮，这就是它不起作用的原因。试试这个：
var$self=$（this）；$。post（url，function（）{$self.removeClass（'indicator'）}）
。
.indicator {
    position: relative;
}
.indicator:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 3px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    background:url(http://www.graphicsoptimization.com/blog/wp-includes/images/go_examples/2008_05/indicator.gif) no-repeat;
}

$('#contact-submit').click(function()
{   
    $('<div class="indicator"></div>').appendTo($(this).parent());
});
$('#subscribe-submit').click(function() 
{   
    $('<div class="indicator"></div>').appendTo($(this).parent());
});