Bootstrap单选按钮切换问题

Question

我正在尝试按照Twitter Bootstrap的方式将一些普通按钮转换成单选框（http://twitter.github.com/bootstrap/javascript.html#buttons）。我遵循了说明，但当我按下按钮时，在控制台中出现以下错误：Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'。您知道可能是什么原因吗？这些按钮在页面中加载，只有在通过 AJAX 显示相应内容时才变为可见。谢谢！

- Bogz902

---

也许是个简单的问题，但你是否已经加载了 bootstrap-button.js 或者 bootstrap.js？ - Pierre de LESPINAY

bootstrap.js已加载。我的页面上有模态框，它们100%的时间都能正常工作。但是单选按钮只有5%的时间能正常工作。 - Bogz902

你说按钮只有在相关内容（来自 AJAX）加载后才会显示，对吗？我不确定你是否可以在按钮仍然隐藏时初始化它们。 - Pierre de LESPINAY

你能把你的代码放在jsFiddle上吗？ - Sara

我也遇到了同样的问题，但下面的解决方案对我没有用。Bootstrap v3.1.0和jQueryUI v1.10.3。 - user396070

Answer 1

我遇到了同样的问题，并且让我抓狂！！！

直到我发现我在加载jqueryui之前加载了bootstrap...

我改变了顺序并注意到如果在加载bootstrap之前加载jqueryui，我就没有这个问题：)

- Alexandre Paulo

---

Bootstrap有一个修改过的jQuery UI版本，加载jQuery UI可能会导致问题。 - user1537415

要在 bootstrap.js 之前加载 jQuery UI，只需将 <script src="jquery-ui.js"></script> 放在 <script src="bootstrap.js"></script> 之前。如果您正在使用 requirejs，请添加一个 shim：shim: { "bootstrap": { "deps": [ "jquery-ui", "jquery" ] }, "jquery-ui": { "deps": [ "jquery" ] } } - PierrickM

谢谢Alexandre，这解决了我的问题。我正在使用Meteor，所以我必须删除jquery和jquery-ui，并将它们放在我的客户端文件夹中。 - Eric Leroy

我也遇到了同样的问题，但这个解决方案对我没有起作用。Bootstrap v3.1.0和jQueryUI v1.10.3。 - user396070

https://jqueryui.com/download/ 为我量身定制的捆绑包，只包含我需要的内容，非常适合我。 - anvd

Answer 2

这个问题是由于jquery-ui阻止了像我这样的用户从bootstrap初始化按钮定义，因为我在使用Yii中的CJUiAutocomplete小部件时，存在调用javascript文件顺序的问题。只需将与button.js对应的javascript从bootstrap文件移到主工作文件中，它就可以平稳地工作。

或者，将相应的js放在一个单独的文件中，并在您的javascript文件堆栈底部调用它。

- Rohan

Answer 3

交换Bootstrap和jQueryUI的加载顺序可以解决此问题，但这会导致其他问题，比如jQueryUI对话框上的关闭X无法显示。是否有其他方法解决这个问题？

- Connie DeCinko