Rails 5:如何将 $(document).ready() 与 turbo-links 一起使用

IT技术 javascript jquery ruby-on-rails turbolinks ruby-on-rails-5
2021-01-30 01:54:11

Turbolinks 可防止$(document).ready()在初始加载之外的所有页面访问中触发正常事件,如此此处所述但是,链接答案中的所有解决方案都不适用于 Rails 5。如何像以前的版本一样在每次访问页面时运行代码?

6个回答

ready您不需要监听事件,而是需要在每次页面访问时连接到 Turbolinks 触发的事件。

不幸的是,Turbolinks 5(这是出现在 Rails 5 中的版本)已经被重写,并且没有使用与之前版本的 Turbolinks 相同的事件名称,导致提到的答案失败。现在有效的是监听turbolinks:load事件,如下所示:

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})
turbolinks:load 在本地为我触发,但不在 Heroku 上触发。我在编译的 js 资产中看到了我的自定义 javascript 代码,但该事件没有触发。
2021-03-29 01:54:11
嗨 Cyril,我遇到了同样的问题,即需要在初始页面加载以及 turbolinks:load 时触发。我在 SO,stackoverflow.com/ questions/ 41421496/...上问了一个关于这个的问题你对为什么会这样有更深入的了解吗?你在使用 jquery-turbolinks 吗(我是)。唯一的好处是它确保您的代码是幂等的。
2021-03-30 01:54:11
这对于rails 6有什么不同吗?
2021-04-05 01:54:11
是的。这里也解释了。guides.rubyonrails.org/...检查 5.2 页面更改事件。
2021-04-12 01:54:11
尽管 Rail 文档说了什么,但我正在使用,on('ready turbolinks:load')否则我在某些页面上遇到了一些问题
2021-04-13 01:54:11

原生JS:

document.addEventListener("turbolinks:load", function() {
    console.log('It works on each visit!');
});
turbo:load 涡轮增压
2021-03-22 01:54:11

在 rails 5 中,最简单的解决方案是使用:

$(document).on('ready turbolinks:load', function() {});

而不是$(document).ready. 奇迹般有效。

@XiaohuiZhang 如果您的脚本必须在带有 turbolinks 的页面上运行而在没有 turbolinks 的页面上运行,则在没有 turbolinks 的页面上将无法运行,因为它将需要 turbolinks:load 事件来执行代码
2021-03-16 01:54:11
@XiaohuiZhang 你确定这行得通吗????因为如果$(document).ready被触发,那么至少在我自己的场景中,我不需要turbolinks:load
2021-03-19 01:54:11
@XiaohuiZhang 我尝试过使用 Turbolinks 5,但没有用。如果页面上禁用了 turbolinks,则仅ready触发事件。如果有 turbolinks,代码会被调用两次
2021-03-20 01:54:11
不要添加ready到列表中,否则函数会被执行两次。正如github.com/turbolinks/turbolinks/#observing-navigation-events所说,你应该这样做: javascript $(document).ready(function() { $(document).on('turbolinks:load', function() {} ) })
2021-03-30 01:54:11
@escanxr 两者都有效,你可以试试。因为无论是否有 Turbolinks 页面,Turbolinks 总是会触发“turbolinks:load”事件。
2021-04-03 01:54:11

这是我的解决方案, override jQuery.fn.ready,然后$(document).ready无需任何更改即可工作:

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn
这正是我所需要的。这也适用于依赖document回调的外部库为什么投反对票?只要在整个应用程序中都使用 turbolinks,这应该是安全的,对吗?
2021-03-21 01:54:11

这是对我有用的解决方案,从这里开始

  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
    
productionenv 中呢?你测试过吗?有些人说它在development模式下工作正常
2021-03-31 01:54:11
宝石已弃用
2021-04-02 01:54:11