bootstrap data loading text not working

Question

I am trying to create a twitter bootstrap button that changes to 'Loading...' when selected until the javascript loads. However I cannot get it to work...

Here is my 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>

Answer 1

As you're using jQuery and bootstrap, you can follow this example on 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: see the full sample on the link. Notice the external libraries on the left menu on jsfiddle, you can't forget to reference them.