Bootstrap 的 javascript 在本地工作，但在部署到服务器时不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12139670/
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
Bootstrap's javascript works locally but not when deployed to a server
提问by dialex
I downloaded the barebone example of Twitter's bootstrap and customized it. I tested it locally (with WAMP server) and everything works perfectly, both the CSS and the JScript.
我下载了 Twitter 引导程序的准系统示例并对其进行了自定义。我在本地（使用 WAMP 服务器）对其进行了测试，一切正常，包括 CSS 和 JScript。
I uploaded the files to my webhosting service and the JScript just doesn't work. I noticed it because dropdown boxes stopped working.
我将文件上传到我的虚拟主机服务，但 JScript 不起作用。我注意到它是因为下拉框停止工作。
I searched and found other persons with the same problem but they all are using ruby and I'm not. Just the play CSS+JScript provided by bootstrap. Besides they said the solution was to include the bootstrap.js first and then the jquery.js. Well I tried it and it didn't work, I even included the not minified .js and still it didn't work.
我搜索并找到了其他有同样问题的人，但他们都在使用 ruby，而我没有。就是bootstrap提供的播放CSS+JScript。此外，他们说解决方案是先包含 bootstrap.js，然后是 jquery.js。好吧，我试过了，但没有用，我什至包含了未缩小的 .js，但仍然没有用。
I'm using the same browser (Chrome) for local and remote testing. I also tried different hosting services and the problem occurred in both.
我使用相同的浏览器 (Chrome) 进行本地和远程测试。我还尝试了不同的托管服务，但两者都出现了问题。
Help is much appreciated.
非常感谢帮助。
Other similar questions:
其他类似问题：
采纳答案by dialex
I know this is very strange but I think I got the solution. Previously I was using the (supplied) jQuery 1.7.2 minified. Now I changed it to use the jQuery 1.8.0 not minified. It just started to work... Another thing I did was to convert all files' encodingto UTF8 (I think this was the real problem/solution)
我知道这很奇怪，但我想我得到了解决方案。以前我使用的是（提供的）jQuery 1.7.2 缩小版。现在我将其更改为使用未缩小的 jQuery 1.8.0。它刚刚开始工作......我做的另一件事是将所有文件的编码转换为UTF8（我认为这是真正的问题/解决方案）
回答by Hoff
The issue might be that you load boostrap.js before jQuery. Locally your browser may be using a cached copy of Jquery, so it works there but not on your live site. Try fixing it by switching those two lines in your code:
问题可能是您在 jQuery 之前加载了 boostrap.js。在本地，您的浏览器可能正在使用 Jquery 的缓存副本，因此它可以在本地运行，但不能在您的实时站点上运行。尝试通过切换代码中的这两行来修复它：
<script src="/code4pt/styles/js/bootstrap.js"></script>
<script src="/code4pt/styles/js/jquery.js"></script>
回答by Shahed
I had the same problem. In IE, the site was working on localhost but not when hosted on a different server. Adding the following meta tag fixed it.
我有同样的问题。在 IE 中，该站点在 localhost 上运行，但在托管在其他服务器上时却没有。添加以下元标记修复了它。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
回答by Bluelake_BW
Back to basics: If Debug is set to true on the local machine and false on the deployment environment as it should be, make sure your .min.js files are not overriding customizations you have made to the non-minified versions of .js files (applies to .css as well).
回归基础：如果 Debug 在本地机器上设置为 true 而在部署环境上设置为 false，请确保您的 .min.js 文件没有覆盖您对 .js 文件的非缩小版本所做的自定义（也适用于 .css）。
You can also turn Debug off on the local machine and you should see the same issues.
您还可以在本地机器上关闭调试，您应该会看到相同的问题。
回答by Darrell
I had the exact same problem, so was relieved to find this post and others like it. My resolution was similar. I pulled my hair out for half a day trying all different things. Walked the dog. Had half a dozen beers. Slept on it. Had breakfast. Recopied back the stylesheets at top, and the js from the bottom from the local html to the server php, and then for some unknown reason it started working again. The only points which seem useful for others going through the same:
我遇到了完全相同的问题，所以很高兴找到这篇文章和其他喜欢它的人。我的决心是相似的。我拉了半天的头发尝试所有不同的东西。遛狗。喝了半打啤酒。睡在上面。吃过早饭。将顶部的样式表和底部的 js 从本地 html 重新复制到服务器 php，然后由于某种未知原因它再次开始工作。对其他经历相同的人似乎有用的唯一要点：
- Try and get back to a working scenario - in my case the index.html was working on the server but not the index.php. Getting these the exact same was key.
- Try on different browsers just in case something strange is going on.
- Make sure you keep clearing the browser cache (e.g. right click on the reload button in Chrome and choose 'Empty Cache and Hard Reload')
- Inspect your bootstrap css and js versions. Change them forward and backward in version until you get success. Chances are, the version that came with your bootstrap theme download is the most likely one to work.
- 试着回到一个工作场景——在我的例子中，index.html 在服务器上工作，而不是 index.php。让这些完全相同是关键。
- 尝试在不同的浏览器上以防万一发生奇怪的事情。
- 确保您一直清除浏览器缓存（例如，右键单击 Chrome 中的重新加载按钮并选择“清空缓存和硬重新加载”）
- 检查您的引导程序 css 和 js 版本。在版本中向前和向后更改它们，直到成功。很有可能，您的引导程序主题下载附带的版本是最有可能工作的版本。
回答by Aaron Gray
I was having simular issues before. The tabs function was working fine in my HTML site, but would not work when coded into a Wordpress theme. All of the source URLS were being generated dynamically with Wordpress's .
我之前遇到过类似的问题。tabs 功能在我的 HTML 站点中运行良好，但在编码为 Wordpress 主题时不起作用。所有源 URL 都是使用 Wordpress 的 .
The tabs finally began working when I added all JS links (except for Modernizr into the footer instead of the header.
当我添加所有 JS 链接（除了 Modernizr 到页脚而不是页眉中）时，选项卡终于开始工作了。
回答by Chris Hammond
Late to the party but I found out that my issue was that the Bootstrap.jswas not being pushed out during deployment.
聚会迟到了，但我发现我的问题是Bootstrap.js在部署过程中没有被推出。
回答by MdE
In addition to the very useful suggestions by @dialex and @Darrell , I will add that if none of that works, you can review any code that you might be linking to, ie. via require ('page.php');, for duplicates. Duplicated .js links tend to cause these issues.
除了@dialex 和@Darrell 非常有用的建议之外，我还要补充一点，如果这些建议都不起作用，您可以查看您可能链接到的任何代码，即。通过require ('page.php');, 对于重复项。重复的 .js 链接往往会导致这些问题。
回答by Eric Cloninger
I ran into this on a site I built and uploaded to Amazon S3. Worked fine on my local machine and even my local server, but didn't work when served from Amazon. The console in Firefox (but not Chrome) showed it was failing to load bootstrap.min.css (et. al) because their MIME type was not text/css.
我在我构建并上传到 Amazon S3 的网站上遇到了这个问题。在我的本地机器甚至我的本地服务器上都可以正常工作，但是从 Amazon 提供服务时却无法正常工作。Firefox（但不是 Chrome）中的控制台显示它无法加载 bootstrap.min.css（等），因为它们的 MIME 类型不是 text/css。
I had to use the S3 console to force change their types to text/css, clear caches, and reload. Voila!
我不得不使用 S3 控制台强制将它们的类型更改为 text/css、清除缓存和重新加载。瞧！
