引导数据加载文本不起作用答案

【问题标题】：bootstrap data loading text not working引导数据加载文本不起作用
【发布时间】：2014-03-01 09:09:57
【问题描述】：

我正在尝试创建一个 twitter 引导按钮，该按钮在选择时更改为“正在加载...”，直到加载 javascript。但是我无法让它工作......

这是我的html：

<button type="submit" id="sign-up" data-loading-text="Processing..." class="btn btn-sign-up">SIGN UP</button>

Javascript：

<script>
$('#sign-up').click(function () {
    var btn = $(this);
    btn.button('loading');
    $.ajax(...).always(function () {
    btn.button('reset');
    });
});
</script>

【问题讨论】：

鉴于这是 Bootstrap example code 的几乎完全相同的副本，我会说您只是缺少一个资源（例如 jQuery 或 Bootstrap JS 文件），或者您确实得到了 @987654325 @。你的错误控制台说什么？
意料之外的令牌。我只是想弄清楚需要做什么才能使这个 javascript 元素起作用
尝试将 button type="submit" 改为 type="button".... 我认为
我不知道你是否解决了这个问题。如果不是你现在可能已经放弃了，但我几乎可以肯定你需要添加你的报价，当它不起作用时它对我有用（即$.ajax('...').always）。
根据docs，此功能在 v3.3.5 中已弃用并在 v4 中删除。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

不确定您是否已经解决了问题。您应该将脚本放在 $(document).ready() 回调中，以便在注册点击事件时 $("#sign-up") 可用

$(document).ready(function() {
    $('#sign-up').click(function () {
        var btn = $(this);
        btn.button('loading');
        $.ajax(...).always(function () {
            btn.button('reset');
        });
    });
});

让我们在这里尝试更新的代码 http://jsbin.com/pamujimise/edit?html,output

【讨论】：

【解决方案2】：

当您使用 jQuery 和 bootstrap 时，您可以在 http://jsfiddle.net/liuyl/RdpRw/1/ 上按照此示例进行操作

$('button[data-loading-text]')
.on('click', function () {
    var btn = $(this)
    btn.button('loading')
    setTimeout(function () {
        btn.button('reset')
    }, 3000)
});

OBS：查看链接上的完整示例。注意 jsfiddle 左侧菜单中的外部库，不要忘记引用它们。

【讨论】：