Question

像这样的Javascript代码

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

当我在页面之间点击或使用浏览器后退按钮时，

可以正常使用turbolinks。但是，当我刷新页面时，不会加载javascript代码。如果我刷新几次，没有任何反应，但如果我点击指向其他背面的链接并单击返回该页面，则现在会加载javascript代码。

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

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

Answer 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旨在涵盖这一点。

Answer 2

您可以这样使用

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

等效的咖啡代码

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

Answer 3

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

Turbolinks加载事件无法处理页面刷新

3 个答案: