78

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

我的资产/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();
      }
    });
});
4

5 回答 5

180

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

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

gem 'jquery-turbolinks'

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

//= require jquery.turbolinks

你应该很高兴。

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

于 2013-07-29T13:02:54.203 回答
17

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

来自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在列表中的正确位置添加之前，所以它有点挑剔。然后我添加了一种新方法，我希望它能更好地工作。

于 2014-03-13T08:21:15.660 回答
8

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

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

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

于 2015-05-21T17:36:22.627 回答
5

Turbolinks是这里的问题。Turbolinks被添加到rails中以提高网页的性能。我已经得到了这个解决方案

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

有关更多详细信息，请参阅此

于 2015-12-02T17:09:06.873 回答
1

删除这行代码：

//= require turbolinks

然后添加这个：

//= require jquery.turbolinks
于 2019-02-02T16:17:00.810 回答