Twitter Bootstrap按钮js无法正常工作

Question

我正在使用Twitter Bootstrap,我似乎无法让按钮状态发生变化.

我正在从http://jsfiddle.net/YCst4/1/复制js ,我没有收到回复.这就像我没有加载jQuery,但我在头文件中加载了bootstrap.min.js.我在页面上的其他JavaScript没有任何问题.

这就是我在Codeigniter视图中的内容:

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

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

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

关于是什么导致这个的任何想法？是bootstrap-button.js不是Bootstrap附带的bootstrap.min.js的一部分吗？

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

编辑:

当我查看源页面时,我可以看到在头文件视图中加载了bootstrap.min.js,我可以点击它来查看它的源代码,所以路径是正确的.但是,按钮js代码仅在我<script src="http://site.dev/assets/admin/js/bootstrap.min.js"></script>在实际内容视图中重复时才起作用.

我让jQuery在bootstrap.min.js上面加了一行,并且jQuery元素在与按钮完全相同的视图中工作.我很难过.

Answer 1

我在bootstrap.min.js之后加载了jquery-ui-1.8.21.custom.min.js.显然存在一些冲突.

Answer 2

您需要将代码放入文档就绪函数中,以便在页面准备好之后运行,而不是之前运行.

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

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

JS Fiddle似乎会自动为您执行此操作,这就是它在那里工作的原因.