JQuery 仅在 Rails 4 应用程序中的页面刷新时加载答案

【问题标题】：JQuery gets loaded only on page refresh in Rails 4 applicationJQuery 仅在 Rails 4 应用程序中的页面刷新时加载
【发布时间】：2013-07-26 17:24:26
【问题描述】：

我创建了一个 Rails 4 应用程序并添加了用于图像弹出效果的 fancybox 库。它工作正常，但仅在刷新页面时。如果用户没有刷新页面，则 jquery 根本不起作用。我也尝试使用小型 jquery 方法对其进行测试，但只有在页面刷新后才能正常工作。我也在使用 twitter 引导程序。

我的 assets/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();
      }
    });
});

【问题讨论】：

它是否在第一个页面加载时起作用，而当您单击另一个链接时它不起作用？我认为您对 turbolinks 库有疑问。从您的 assets/javascript/application.js 文件中删除该行（第 5 行，//= require turbolinks）并告诉我 :)
嘿，你的伎俩奏效了，js 加载正常。但是我以后不需要它的 turbolink 怎么办？
我很惊讶这不是一个更明显/讨论的话题......使用 jQuery 和 Turbolinks 很常见

标签： jquery twitter-bootstrap ruby-on-rails-4

【解决方案1】：

好的，我想我理解您的问题足以提供答案。使用 turbolinks 的问题在于，大多数绑定到 document ready 事件的插件和库都会停止工作，因为 turbolinks 会阻止浏览器重新加载页面。有一些技巧可以解决这些问题，但最简单的解决方法是使用jquery.turbolinks。

要使用它，只需将其添加到您的Gemfile：

gem 'jquery-turbolinks'

这个到你的assets/javascripts/application.js 文件：

//= require jquery.turbolinks

你应该很高兴。

仅供参考：您并不真正需要使用 turbolinks，但它很有用，并且通过避免整个页面刷新来加快请求速度。 Turbolinks 通过 AJAX 获取您单击的链接的内容并将其呈现在同一页面上，从而消除了重新加载资产（JS 和 CSS）的开销。尝试使您的页面与它一起使用。使用上一段中的库我没有遇到真正的问题。页面上的 CSS 和 JS 越多，使用 turbolink 获得的改进就越大。

【讨论】：

我遇到了这个确切的问题，你解决了，谢谢伊恩。我认为 jquery 没有在 link_to 重定向之后将我的事件侦听器绑定到页面，并且仅在页面加载时。
好的，但重要的是要注意//= require jquery.turbolinks 需要在 //= require jquery 之后才能工作github.com/kossnocorp/jquery.turbolinks
为我工作非常感谢，但应该添加您需要重新启动服务器（对于新手）
一定要删除 /= require jquery =)
太棒了。感谢您提供此信息。这对我很有帮助。

【解决方案2】：

Ian 有一个很好的答案，而这个答案是对它的一种附加（所以在撰写本文时，我不会让我真正对任何人发表评论。）

来自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

在我没有在列表中的正确位置添加require jquery.turbolinks 之前，所以它有点挑剔。然后我添加了一种新方法，我希望它能更好地工作。

【讨论】：

+1 获取更多信息，在我阅读您的回答之前，我的链接仍然无法使用。

【解决方案3】：

在我遵循 CodeWalrus 和 Ian 的回答之前，我无法让事情正常进行，但对我来说还有更多。如the jquery.turbolinks Readme 所述，顺序必须非常具体。

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

另外，as described here，如果您出于速度优化的原因将应用程序 javascript 链接放在页脚中，就像我一样，您需要将其移动到 <head> 标记中，以便它在内容之前加载<body> 标签。

【讨论】：

这对我有用。似乎必须将包含的 javascrip 文件移到头部。

【解决方案4】：

Turbolinks 是这里的问题。Turbolinks 被添加到 rails 以提高网页的性能。我有这个解决方案工作

<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %>

更多详情请参考this

【讨论】：

【解决方案5】：

去掉这行代码：

//= require turbolinks

然后添加这个：

//= require jquery.turbolinks

【讨论】：