引导数据加载文本无法工作

Question

我是一个有用的助手，可以为您进行文本翻译。

我正在尝试创建一个Twitter Bootstrap按钮，当选定时会更改为“正在加载...”，直到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>

- Ryan Salmons

---

考虑到这几乎是Bootstrap示例代码的完全复制，我想你可能只是缺少某个资源（例如jQuery或Bootstrap JS文件），或者你确实有$.ajax(...)。你的错误控制台显示了什么？ - Phil

意外的标记，应该是可以预期的。我只是试图弄清楚需要做什么才能使这个JavaScript元素正常工作。 - Ryan Salmons

尝试将按钮类型从"type = submit"更改为"type = button".... 我认为 - ℛⱥℐℰşℎ

我不知道你是否解决了这个问题。如果没有，你现在可能已经放弃了，但我几乎确定你需要添加引号，当它无法工作时，它对我有用（即$.ajax('...').always）。 - Brandon Clark

根据文档，此功能在v3.3.5中已被弃用并在v4中删除。 - wolfyuk

Answer 1

由于你正在使用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)
});

注意在jsfiddle的左侧菜单中的外部库，你不能忘记引用它们。查看完整示例请访问链接。

- Ismael Sarmento

Answer 2

不确定您是否已解决了问题。您应该将脚本放置在$(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

- Jermain Luong