bootstrap按钮加载状态

Question

我试图这样做,以便当有人点击按钮时,它从正常按钮切换到切换按钮,文本更改为正在加载...

所以我包括了这个按钮

<button type="button" id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
    Loading state
</button>

但是当我点击按钮时没有任何反应.

我也有这个在身体的底部.

<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>

这是我试图包含按钮的网站(它位于屏幕的底部) http://www.ticketmachine.x10.mx/

Answer 1

我访问了您提供的链接.我打开firebug它记录下面给出的JS错误.

未捕获的ReferenceError:$未定义

您编写了一些使用jQuery的JavaScript,但在包含jQuery库之前添加了它.

您应该在jQuery链接之后移动脚本标记.

Answer 2

一旦排序了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)
    });
})

小提琴:http://jsfiddle.net/RJDgG/1/