JQuery 仅在 Rails 4 应用程序中的页面刷新时加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17881384/
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
JQuery gets loaded only on page refresh in Rails 4 application
提问by vishB
I have created a Rails 4 application and have added fancybox library for an image popup effect. It works fine but only when the page is being refreshed. If the page is not refreshed by the user then the jquery does not work at all. I tried testing it with small jquery methods also but all work only after page refresh. I am also using twitter bootstrap.
我创建了一个 Rails 4 应用程序，并为图像弹出效果添加了fancybox 库。它工作正常，但仅当页面正在刷新时。如果用户没有刷新页面，则 jquery 根本不起作用。我也尝试使用小型 jquery 方法对其进行测试，但所有这些都只能在页面刷新后才能工作。我也在使用推特引导程序。
My assets/application.js file :
我的资产/application.js 文件：
//= require jquery
//= require jquery_ujs
//= require fancybox
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
$(document).ready(function() {
$(".fancybox").fancybox();
$("#hand").click(function(){
if($("#check6").is(':visible'))
{
$("#check6").hide();
}
else
{
$("#check6").show();
}
});
});
回答by Ian
Okay, I think I understand your problem enough to provide an answer. The thing about using turbolinks is that most plugins and libraries that bind to the document ready event stop working, since turbolinks prevents the browser from reloading the page. There are tricks to fix those issues, but the easiest way to fix it is to use jquery.turbolinks.
好的，我想我足够了解您的问题，可以提供答案。使用 turbolinks 的事情是绑定到文档就绪事件的大多数插件和库停止工作，因为 turbolinks 阻止浏览器重新加载页面。有一些技巧可以解决这些问题，但最简单的解决方法是使用jquery.turbolinks。
To use it, just add this to your Gemfile:
要使用它，只需将其添加到您的Gemfile：
gem 'jquery-turbolinks'
and this to your assets/javascripts/application.jsfile:
这到您的assets/javascripts/application.js文件：
//= require jquery.turbolinks
and you should be good to go.
你应该很高兴去。
FYI: You don't really needto use turbolinks, but it's useful and it makes requests faster by avoiding a full page refresh. Turbolinks fetches the contents of the link you clicked via AJAX and renders it on the same page, thus eliminating the overhead of reloading assets (JS and CSS). Try to make your page work with it. Using the library in the previous paragraph I've had no real issues. The more CSS and JS you have on your page, the bigger the improvement you get by using turbolinks.
仅供参考：您实际上并不需要使用 turbolinks，但它很有用，并且通过避免整页刷新来加快请求速度。Turbolinks 通过 AJAX 获取您单击的链接的内容并将其呈现在同一页面上，从而消除了重新加载资产（JS 和 CSS）的开销。尝试让您的页面使用它。使用上一段中的库我没有遇到真正的问题。页面上的 CSS 和 JS 越多，使用 turbolinks 获得的改进就越大。
回答by CodeWalrus
Ian had a good answer, and this one is an add-on of sorts to that (SO won't let me actually comment to anyone at time of writing.)
伊恩有一个很好的答案，这是一个附加组件（所以在撰写本文时，我不会让我对任何人发表评论。）
From https://github.com/rails/turbolinks/#jqueryturbolinks:
从https://github.com/rails/turbolinks/#jqueryturbolinks：
Add the gem [gem 'jquery-turbolinks'] to your project, then add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js:
//= require jquery.turbolinks
Before I hadn't added require jquery.turbolinksin the right spot within the list, so it was being a bit picky. Then I added this a new way and I hope it works better.
之前我没有require jquery.turbolinks在列表中的正确位置添加，所以有点挑剔。然后我添加了一种新方法，我希望它能更好地工作。
回答by Karen
I couldn't get things working until I followed both CodeWalrus's and Ian's answers, but for me there was more to it. As described on the jquery.turbolinks Readme, the order must be very specific.
在我遵循 CodeWalrus 和 Ian 的答案之前，我无法让事情发挥作用，但对我来说还有更多。如jquery.turbolinks 自述文件中所述，顺序必须非常具体。
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
Also, as described here, if you have put the application javascript link in the footer for speed optimization reasons, as I had, you will need to move it into the <head>tag so that it loads before the content in the <body>tag.
此外，如此处所述，如果您出于速度优化的原因将应用程序 javascript 链接放在页脚中，就像我一样，您需要将其移动到<head>标签中，以便它在<body>标签中的内容之前加载。
回答by Unicornz
Turbolinks are the problem here.Turbolinks are added in rails to improve performace of webpage.I have got this solution working
Turbolinks 是这里的问题。在 Rails 中添加了 Turbolinks 以提高网页的性能。我有这个解决方案工作
<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %>
<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %>
Fore more details refer this
欲了解更多详情，请参阅此
回答by Laurence Bautista
Remove this line of code:
删除这行代码：
//= require turbolinks
Then add this one:
然后添加这个：
//= require jquery.turbolinks
