Bootstrap 3状态按钮无法使用$（document）.ready

Question

在玩stateful buttons in Bootstrap 3时，我遇到了问题。如代码段＃2（jsfiddle）所示，我希望“加载状态”按钮将其标签更改为“正在加载”，然后将自身更改回“加载状态”;这个版本有效。但是，代码段＃3（jsfiddle）不起作用。

任何人都可以解释为什么会这样吗？

代码段＃1：HTML代码

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

Snippet＃2：可以运行的JS代码

(function ($) {
    $('#loading-example-btn').click(function () {
        var btn = $(this);
        btn.button('loading');
        setTimeout(function () {
            btn.button('reset');
        }, 1000);
    });
})(jQuery);

代码段＃3：无效的JS代码

(function ($) {
    $(document).ready(function () { //<-- this is causing the button not to work
        $('#loading-example-btn').click(function () {
            var btn = $(this);
            btn.button('loading');
            setTimeout(function () {
                btn.button('reset');
            }, 1000);
        });
    });
})(jQuery);

修改

谢谢@HüseyinBABAL。他帮助我意识到我使用的是一个不兼容的Bootstrap CSS（我借用别人的jsfiddle）。一旦我修好它（jsfiddle），就会得到照顾。

Answer 1

这是由于bootstrap js和jquery版本不兼容。将其更新为bootstrap 3.x.或者将jquery降级到1.8.3

//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

你可以在这里看到bootstrap 3.x的工作演示：http://jsfiddle.net/KYR64/1/

您可以在此处查看有关降级jquery的工作演示：http://jsfiddle.net/KYR64/2/