页面刷新时，Turbolinks的加载事件无效。

Question

像这样的Javascript代码

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

当我在页面之间点击或使用浏览器的后退按钮时，它与turbolinks一起正常工作。但是，当我刷新页面时，javascript代码不会加载。如果我多次刷新，什么也不会发生，但是如果我单击链接到不同的页面并返回到该页面，则javascript代码现在已加载。

看起来turbolinks：load在大多数事件上都有效，但不适用于页面重新加载。文档说它“在初始页面加载后仅触发一次，并在每次Turbolinks访问后再次触发”。出了什么问题？

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

- Obromios

---

我认为如果您正在使用Turbolinks 5.0版本，那么jquery.turbolinks gem可能已经过时了。 - Timmy Von Heiss

您可以将此代码放在单独的函数中实现：function() { $("p#hide_if_js").hide(); });，并在需要使用它的地方添加以下内容：document.addEventListener("turbolinks:load",func) document.addEventListener("ready",func)。 - uzaif

关于Timmy Von Heiss的评论。根据这个视频，https://gorails.com/episodes/upgrade-to-turbolinks-5，它可以正常工作。而且在我的情况下，除了页面加载之外，所有的jquery都能在每次加载页面更改时工作。这对我来说非常不寻常，通常使用turbolinks，大多数事情都很不稳定，除了页面加载。 - Obromios

我尝试了uzaif的评论，它确实修复了页面加载问题，但现在其他事件有点不稳定，即大多数情况下它可以工作，但有时无法正确呈现页面。 - Obromios

Uzaif的方法似乎确实能够改善情况，我会进行更多测试并回来处理。 - Obromios

Answer 1

在uzaif的评论帮助下，以下内容得以运作

  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本身应该已经覆盖了此功能。

"

- Obromios

Answer 2

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

- Pedro

Answer 3

你可以这样使用

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

等价的咖啡代码

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

- abhi110892

---

我尝试过这个，但它没有帮助。也许你可以解释一下为什么你认为它有帮助。我还对这段代码的coffeescript等效版本感兴趣。 - Obromios

你的浏览器控制台中是否出现任何JS错误？如果有，请分享。 - abhi110892

我又试过了，但它对我无效。浏览器控制台或服务器日志中没有错误，事件根本没有触发。 - Obromios

这行不通。document.addEventListener不支持多个事件。在此处查看文档：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener对我来说，正确的方法是 $(document).on('ready turbolinks:load', function { …。 - lucasarruda

我不得不在两个事件之间加上逗号，即 $(document).on('ready, turbolinks:load', function { …，否则函数会在页面加载时附加两次。 - Lee Eather