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似乎会自动为您执行此操作，这就是它在那里工作的原因。

Answer 3

您正试图在按钮是DOM的一部分之前将单击绑定到按钮。 把你的东西放在文件就绪功能中，你应该没问题。

Answer 4

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

Answer 5

我最近遇到了同样的问题。 以下是一些可能对您有所帮助的事情：

1. 您是否按必要的顺序加载js文件？ 列出的顺序（作为脚本标记）必须是正确的（基于依赖性的）顺序，如下所示：

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

2. 您使用的是本地或远程css / js文件吗？ 如果你正在使用远程的。 检查它们中是否有人引用github。 如果他们看起来像这样：

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

   他们不会工作。 Chrome会抛出mime类型错误。