Turbolinks 加载事件不适用于页面刷新答案

【问题标题】：Turbolinks load event not working on with page refreshTurbolinks 加载事件不适用于页面刷新
【发布时间】：2017-05-16 05:53:57
【问题描述】：

这样的Javascript代码

document.addEventListener("turbolinks:load", function() {
  $("p#hide_if_js").hide();
});

当我在页面之间单击或使用浏览器后退按钮时，可以正常使用 turbolinks。但是，当我刷新页面时，没有加载 javascript 代码。如果我刷新几次，什么都没有发生，但是如果我点击一个指向不同背面的链接并点击回到页面，现在加载了 javascript 代码。

看起来 turbolinks:load 正在处理大多数事件，但不是页面重新加载。文档说它“在初始页面加载时触发一次，并在每次 Turbolinks 访问后再次触发”。出了什么问题？

我正在使用 jquery.turbolinks gem 和相关的compatibility 代码。

【问题讨论】：

如果您使用的是 Turbolinks 5.0 版，我认为 jquery.turbolinks gem 可能已经过时了
您可以在单独的函数function() { $("p#hide_if_js").hide(); }); 中实现此功能，并在需要使用此功能的位置添加document.addEventListener("turbolinks:load",func) document.addEventListener("ready",func)
关于 Timmy Von Heiss 的评论。根据这个视频，gorails.com/episodes/upgrade-to-turbolinks-5，它可以工作。同样在我的情况下，除了页面加载之外，每次加载页面更改时，所有 jquery 都在工作。这对我来说是非常不寻常的，通常使用 turbolinks，除了页面加载之外，大多数事情都是不稳定的。
我尝试了 uzaif 的评论，它确实修复了页面加载，但现在其他事件是不稳定的，即大多数情况下它可以工作，但有时它不能正确呈现页面。
uzaif 的方法似乎确实有所改善，我会做更多的测试并重新开始。

标签： javascript ruby-on-rails turbolinks

【解决方案1】：

在uzaif's 评论的帮助下，以下工作成功了

  ready = ->
    if $('body').attr('data-loaded') == 'T'
      return
    # code goes here
    $('body').attr('data-loaded','T')
  $(document).ready(ready)
  $(document).on('turbolinks:load', ready)

$('body').attr('data-loaded') 行是为了防止代码加载两次。

按照 turbolinks 说明的建议，此方法使用事件委托。目前尚不清楚为什么仍然需要使用$(document).ready(ready)，因为turbolink:load 旨在涵盖这一点。

【讨论】：

【解决方案2】：

你可以这样使用

document.addEventListener('load turbolinks:load',function() {
//Your code
});

等效的咖啡代码

document.addEventListener 'load turbolinks:load', ->
  #Your code
  return

【讨论】：

我试过这个，但没有帮助。也许您可以解释为什么您认为它会有所帮助。我也对此代码的咖啡脚本等价物感兴趣。
在上面的代码中，监听器添加了两种事件。第一个，即加载将在您刷新页面时执行 js 代码（您面临的问题）第二个是通过 turbolinks 加载页面时。
你是否在浏览器控制台中遇到任何js错误？如果有请分享。
我又试了一次，它对我不起作用。浏览器控制台或服务器日志中没有错误，事件根本没有触发。
那行不通。 document.addEventListener 不支持多个事件。在此处查看文档：developer.mozilla.org/en-US/docs/Web/API/EventTarget/… 对我来说，正确的做法是 $(document).on('ready turbolinks:load', function { …

【解决方案3】：

$(document).on('turbolinks:load', function() {
  // enter code here
});

【讨论】：