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，我可以点击它来查看它的来源，所以路径是正确的。但是，只有当我在实际内容视图中重复<script src="http://site.dev/assets/admin/js/bootstrap.min.js"></script>时，按钮js代码才有效。

我让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新手：您还需要加载jQuery 之前定义$('#button').click()

Answer 5

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

您是否按照必要的顺序加载js文件？列出的顺序（作为脚本标记）必须是正确的（基于依赖性的）顺序，如下所示：
```
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="button_app.js."></script>
```
您使用的是本地或远程css / js文件吗？如果你正在使用远程的。检查它们中是否有人引用github。如果它们看起来像这样：
```
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-alert.js"></script>
```
他们不会工作。 Chrome会抛出一个mime类型错误。

Twitter Bootstrap按钮js无法正常工作

5 个答案: