jQuery Twitter Bootstrap 按钮 js 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11317255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap button js not working
提问by Motive
I am using Twitter Bootstrap and I can't seem to get the button states to change.
我正在使用 Twitter Bootstrap，但似乎无法更改按钮状态。
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.
我正在从http://jsfiddle.net/YCst4/1/复制 js ，但没有得到响应。就像我没有加载 jQuery，但我在我的头文件中加载了 bootstrap.min.js。我对页面上的其他 javascript 没有任何问题。
This is what I have in my Codeigniter view:
这是我在 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>
Any ideas on what's causing this? is bootstrap-button.js not a part of the bootstrap.min.js that comes with Bootstrap?
关于导致这种情况的任何想法？bootstrap-button.js 不是 Bootstrap 附带的 bootstrap.min.js 的一部分吗？
http://twitter.github.com/bootstrap/javascript.html#buttons
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.
当我查看页面的源代码时，我可以看到标题视图中加载了 bootstrap.min.js，我可以点击它查看它的源代码，所以路径是正确的。但是，按钮 js 代码仅在我<script src="http://site.dev/assets/admin/js/bootstrap.min.js"></script>在实际内容视图本身中重复时才有效。
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.
我让 jQuery 在 bootstrap.min.js 上方加载了一行，并且与按钮在同一视图中的 jQuery 元素完美地工作。我难住了。
回答by Motive
I had jquery-ui-1.8.21.custom.min.js loading after bootstrap.min.js. Apparently there's some conflict.
我在 bootstrap.min.js 之后加载了 jquery-ui-1.8.21.custom.min.js。显然有些冲突。
回答by Kenny Bania
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.
JS Fiddle 似乎会自动为你做这件事，这就是它在那里工作的原因。
回答by kissgyorgy
For javascript newbies like me: you also need to load jQuery beforeyou define $('#button').click()
对于像我这样的 javascript 新手：您还需要在定义之前加载 jQuery$('#button').click()
回答by Greg Pettit
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.
您试图在按钮成为 DOM 的一部分之前将点击绑定到按钮。把你的东西放在文档准备功能中，你应该没问题。
回答by phillipalexander
I had the same problem recently. Here are some things that might help you:
我最近遇到了同样的问题。以下是一些可能对您有所帮助的事情：
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>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.
您是否按必要的顺序加载了 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 类型错误。
