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

78

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

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

jquery twitter-bootstrap ruby-on-rails-4

— VishB
source

6

它在第一页加载时是否起作用，而当您单击另一个链接时却不起作用？我认为您的turbolinks库存在问题。从您的assets/javascript/application.js文件中删除该行（第5行//= require turbolinks），然后通知我:)

— Ian

嘿，您的技巧发挥了作用，js可以正常加载。但是我的turbolinks以后会不需要吗？

— vishB

2

令我惊讶的是，这不是一个更加显而易见的话题/讨论的话题……使用jQuery和Turbolink实在是太普遍了

— Don Cheadle 2015年

180

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

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

gem 'jquery-turbolinks'

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

//= require jquery.turbolinks

而且你应该很好走。

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

— 伊恩
source

我遇到了这个确切的问题，谢谢你，伊恩。我想过jquery并没有在link_to重定向之后将事件监听器绑定到页面，并且仅在页面加载时绑定。

— Alex Neigher 2013年

4

还好它工作了，但需要注意的是//= require jquery.turbolinks需要是后 //= require jquery为它工作github.com/kossnocorp/jquery.turbolinks

— 唐·钱德尔

为我工作，谢谢，但是应该添加您需要重新启动服务器（对于新手）

— GhostRider 2015年

确保删除/ = require jquery =）

— jfgrissom '16

大。感谢您提供此信息。它对我有很大帮助。

— Nimish

17

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

— CodeWalrus
source

2

+1获取额外的信息，直到我阅读了您的答案，我的链接仍然无法使用。

— pob21'4

8

在遵循CodeWalrus和Ian的回答之前，我无法使事情正常进行，但是对我而言，还有更多的东西。如jquery.turbolinks自述文件所述，顺序必须非常明确。

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

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

— 卡伦
source

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

— Aboozar Rajabi'6

5

Turbolinks是这里的问题.Turbolinks被添加到Rails中以提高网页的性能。

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

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

— 独角兽
source

1

删除以下代码行：

//= require turbolinks

然后添加这个：

//= require jquery.turbolinks

— 劳伦斯·包蒂斯塔（Laurence Bautista）
source