如何在Turbolinks 5中运行$(document).on('ready')？

Question

在一个Rails应用程序中，我有一个coffeescript函数，应该在DOM加载后运行。

$(document).ready ->
  # do some stuff

过去我可以通过以下方式进行编辑，以确保这些函数在 Turbolinks 页面刷新时也能正常工作。

$(document).on 'ready page:change', ->
  # do some stuff

我刚刚升级到了Rails 5和Turbolinks 5，但是这些函数不再被正确地调用。

经过多次搜索，我尝试了许多变化，包括

$(document).on 'ready', ->
$(document).ready ->
$(document).on "turbolinks:load", ->
$(document).on "page:load", ->
$(document).on "page:change", ->
# and as suggested by the [Turbolinks readme][1]
document.addEventListener 'turbolinks:load', ->

我也尝试过这些方法，无论是否安装了jquery.tubolinks，以及使用此处建议的turbolinks兼容补丁。

我一定漏掉了一些显而易见的东西！正确的语法是什么，可以确保函数在DOM加载后运行，无论是页面加载还是Turbolink加载？

- Andy Harvey

Answer 1

根据官方turbolinks github文档：（链接）：

在许多情况下，您可以简单地调整代码以侦听turbolinks:load事件，该事件在初始页面加载时仅触发一次，并在每次Turbolinks访问后再次触发。

因此，纯js代码如下：

document.addEventListener("turbolinks:load", function() {
  // ...
})

或者在Coffeescript中像这样：

$(document).on 'turbolinks:load', ->
  # ...
  return

- Mark

---

感谢@Mark，我已经尝试使用此事件使事情正常工作。虽然文档指出“turbolinks:load”事件在“初始页面加载和每次Turbolinks访问后再次触发”，但我认为我的问题在于该事件似乎仅在每次Turbolinks访问后触发。你有任何想法为什么初始页面加载不会触发该事件，或者如何调试这个问题吗？ - Andy Harvey

@AndyHarvey 很有趣。好的，如果你在 $(document).on 'turbolinks:load', -> 事件的第一行加入 console.log("here"); 语句，然后刷新页面，你能在控制台看到输出吗？此外，控制台中是否有任何错误？ - Mark