jQuery / Twitter Bootstrap data-loading-text button with delay

Question

I'm trying to get this exact example working on my website:

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

However, simply including this HTML:

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

Does not work. I'm running jQuery 1.7.x and have loaded the Bootstrap JS files.

To be specific: I want the button to move to the "loading" text change for a slight delay, then go back to the regular text. There doesn't seem to be a good example available online from my Googling (most are asking for a permanent state change or toggle), and the Bootstrap site itself is lacking in documentation here.

Answer 1

In the documentation page, there is a file being loaded called 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

Or just add this so it picks up the Twitter Bootstrap attribute.

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