CSS 引导按钮加载状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15498772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap button loading state
提问by Eric Kim
I am trying to make it so that when someone click on the button it goes from normal button to toggled button with text changed to Loading...
我试图做到这一点，当有人点击按钮时，它会从普通按钮变为切换按钮，文本更改为正在加载...
so I included this button
所以我包含了这个按钮
<button type="button" id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
Loading state
</button>
but nothing happens when I click on the button.
但是当我点击按钮时没有任何反应。
I also have this at the bottom of the body.
我的身体底部也有这个。
<script>
$(function() {
var btn = $('#fat-btn').click(function () {
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
})
</script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
Here is the website I am trying to include the button(its at the bottom of the screen) http://www.ticketmachine.x10.mx/
这是我试图包含按钮的网站（位于屏幕底部） http://www.ticketmachine.x10.mx/
回答by Soundar Rathinasamy
I have visited the link you provided. I opened firebug it logs JS error given below.
我已经访问了您提供的链接。我打开了萤火虫，它记录了下面给出的 JS 错误。
Uncaught ReferenceError: $ is not defined
未捕获的 ReferenceError: $ 未定义
You wrote some JavaScript which used jQuery but it was added before including the jQuery library.
您编写了一些使用 jQuery 的 JavaScript，但它是在包含 jQuery 库之前添加的。
You should move the script tag after the jQuery link.
您应该在 jQuery 链接之后移动脚本标记。
回答by lee_mcmullen
Once you've sorted your jQuery issue, you should update your clickfunction as follows:
对 jQuery 问题进行排序后，您应该click按如下方式更新您的函数：
$(function(){
var $btn = $('#fat-btn');
$btn.click(function(){
var $this = $(this);
$this.attr('disabled', 'disabled').html("Loading...");
setTimeout(function () {
$this.removeAttr('disabled').html('Hello');
}, 3000)
});
})
Fiddle: http://jsfiddle.net/RJDgG/1/
