Question

我有一个使用Turbolinks的Rails 4应用。我的理解是Turbolinks打破了jQuery代码，因为Turbolinks不加载新页面，而只是获取新元素。

因此，导航到新页面可能不会触发.ready，尽管它总是触发.page:load，因此新的jQuery代码不会初始化。

我有很多jQuery代码，所以我不想修改我的jQuery代码以与Turbolinks兼容。

是否可以在我的application.js中添加javascript代码，覆盖.ready事件以包含page:load？我该怎么办？

Answer 1

不要等待$(document).ready为您的jQuery触发，而是使用page:load代替：

$(document).on 'page:load' ->
  <your code>

或者，您可以设置jquery.turbolinks gem：https://github.com/kossnocorp/jquery.turbolinks

Answer 2

使用turbolinks 5.0.0，事件更改为turbolinks:load。请参阅full list of turbolinks events。

文档recommends following code：

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

位于https://github.com/dalpo/jquery.turbolinks的jquery.turbolinks fork已经反映了这些变化，并允许无缝插入turbolink。不过，我会去turbolinks:load事件进行完全控制而不需要另一个库。

Answer 3

我必须使用page:change事件：

JS：

$(document).on('page:change', function () {
    <code here>
});

咖啡脚本：

$(document).on 'page:change', ->
    <code here>

Answer 4

使用TurboLinks 5 / Rails 5 ...我建议像这样实例化DataTables。

当使用后退按钮时，它将阻止标题和页脚分页多次显示。

$(document).on 'turbolinks:load', ->
  tableElementIds = [
    '### TABLE ID HERE ###'
  ]
  i = 0
  while i < tableElementIds.length
    tableElementId = tableElementIds[i]
    if $.isEmptyObject($.find(tableElementId))
      i++
      continue
    table = undefined
    if $.fn.DataTable.isDataTable(tableElementId)
      table = $(tableElementId).DataTable()
    else
      table = $(tableElementId).DataTable(### OPTIONS HERE ###)

    document.addEventListener 'turbolinks:before-cache', ->
      table.destroy()
      return

    i++

  return

使jQuery与Turbolinks一起使用

4 个答案: