Twitter Bootstrap button js not working

Question

I am using Twitter Bootstrap and I can't seem to get the button states to change.

I am copying the js from http://jsfiddle.net/YCst4/1/ and I'm not getting a response. It's like I don't have jQuery loaded, but I have bootstrap.min.js loaded in my header. I don't have any problems with other javascript on the page.

This is what I have in my Codeigniter view:

<script>
$('#button').button();

$('#button').click(function() {
    $(this).button('loading');
});
</script>

<button class="btn" id="button" type="button" data-text-loading="Loading...">Press Me</button>

Any ideas on what's causing this? is bootstrap-button.js not a part of the bootstrap.min.js that comes with Bootstrap?

http://twitter.github.com/bootstrap/javascript.html#buttons

EDIT:

When I view-source the page, I can see the bootstrap.min.js loaded in the header view, and I can click on it to see it's source, so the path is correct. However, the button js code only works when I repeat <script src="http://site.dev/assets/admin/js/bootstrap.min.js"></script> in the actual content view itself.

I have the jQuery loaded a line above the bootstrap.min.js and the jQuery elements in the same view as the button work perfectly. I'm stumped.

Answer 1

I had jquery-ui-1.8.21.custom.min.js loading after bootstrap.min.js. Apparently there's some conflict.

Answer 2

You need to put you code in a document ready function so that it will run after the page is ready, not before.

$(document).ready(function(){
  $('#button').button();

  $('#button').click(function() {
    $(this).button('loading');
  });  
});

JS Fiddle seems to do this automatically for you, which is why it works there.

Answer 3

You are trying to bind a click to the button before the button is part of the DOM. Put your stuff in the document ready function and you should be OK.

Answer 4

对于像我这样的javascript新手：你还需要在定义$('#button').click() 之前加载jQuery。click $('#button').click()

Answer 5

I had the same problem recently. Here are some things that might help you:

1. Are you loading your js files in the necessary order. The listed order (as script tags) MUST be in the correct (dependency-based) order like so:

    <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="button_app.js."></script> 

2. Are you using local or remote css/js files? If you're using remote ones. Check if any of them reference github. If they look like this:

    <script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-alert.js"></script> 

   they won't work. Chrome will throw a mime type error.