Rails 5：如何使用$（document）.ready（）和turbo-links

Turbolinks可以防止正常的$(document).ready()事件触发除初始加载之外的所有页面访问，如这里和这里所讨论的。 但是，链接答案中的解决scheme都不能用于Rails 5。 如何在每个页面上像以前的版本一样运行代码？

Answer 1

而不是听ready事件，你需要挂钩Turbolinks为每个页面访问发起的事件。

不幸的是，Turbolinks 5（这是Rails 5中出现的版本）已被重写，并没有使用与Turbolinks的先前版本相同的事件名称，导致提到的答案失败。 现在有效的是听turbolinks：加载事件如下：

 $( document ).on('turbolinks:load', function() { console.log("It works on each visit!") }) 

Answer 2

原生JS：

 document.addEventListener("turbolinks:load", function() { console.log('It works on each visit!'); }); 

Answer 3

这里是解决scheme，从这里为我工作：

1. 安装gem 'jquery-turbolinks'

2. 添加这个.coffee文件到你的应用程序： https ： //github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. 把它命名为turbolinks-compatibility.coffee

4. 在application.js

    //= require jquery //= require jquery_ujs //= require jquery.turbolinks //= require turbolinks //= require turbolinks-compatibility 

Answer 4

这是我的解决scheme，重写jQuery.fn.ready ，然后$(document).ready工作没有任何改变：

 jQuery.fn.ready = (fn)-> $(this).on 'turbolinks:load', fn 

Answer 5

虽然我们正在等待这个非常酷的gem的修复，但是我能够通过修改以下方法前进;

  addCallback: (callback) -> if $.turbo.isReady callback($) $document.on 'turbo:ready', -> callback($) 

至：

  addCallback: (callback) -> if $.turbo.isReady callback($) $document.on 'turbolinks:load', -> callback($) 

我还没有意识到这个问题没有解决，但在初步检查中似乎运作良好。

Answer 6

使用轻量级的gemjquery-turbolinks 。

它使$(document).ready()与Turbolinks一起工作，而不需要改变现有的代码。

或者，您可以将$(document).ready()更改为以下之一：

 $(document).on('page:fetch', function() { /* your code here */ }); $(document).on('page:change', function() { /* your code here */ }); 

取决于哪一个更适合你的情况。

Answer 7

使用： $(document).on 'turbolinks:load', ->

而不是： $(document).on('turbolinks:load', function() {...})