带有延迟的jQuery/Twitter Bootstrap数据加载文本按钮

Question

我想在我的网站上运行这个确切的示例:

http://getbootstrap.com/2.3.2/javascript.html#buttons

但是,只需包含此HTML:

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

不行.我正在运行jQuery 1.7.x并加载了Bootstrap JS文件.

具体来说:我希望按钮移动到"加载"文本更改稍有延迟,然后返回常规文本.我的谷歌搜索似乎没有一个很好的在线示例(大多数都要求永久状态更改或切换),而Bootstrap站点本身缺少文档.

Answer 1

在文档页面中,有一个名为application.js的文件正在加载.http://twitter.github.com/bootstrap/assets/js/application.js

// button state demo
$('#fat-btn')
    .click(function () {
        var btn = $(this)
        btn.button('loading')
        setTimeout(function () {
            btn.button('reset')
        }, 3000)
    });

Answer 2

或者只是添加它以便它获取Twitter Bootstrap属性.

$('button[data-loading-text]').click(function () {
    $(this).button('loading');
});

Answer 3

记下接受的答案如何在运行按钮('loading')之前将jQuery按钮对象转换为js var,因为虽然这有效,但是当直接在jQuery按钮对象上使用时,按钮('loading')将不起作用.