Rails turbolinks 与 window.onload 相关的问题

Question

我有带有baguetteBox 库的rails 应用程序，用于图像弹出效果，但它只有在页面刷新后才能正常工作。 我知道这是因为 turbolinks，所以我安装了 jquery-turbolinks gem，但它仍然无法正常工作。 //要求 jquery.turbolinks 在正确的位置。

  //
  //= require jquery
  //= require jquery.turbolinks
  //= require jquery_ujs
  //= require baguetteBox.min
  //= require turbolinks
  //= require_tree .

我在显示视图底部有这段代码

<script>
   window.onload = function() {
   baguetteBox.run('.step_div');
   };
</script>

初始化脚本。

有什么想法吗？

Answer 1

您需要为 turbolink 触发稍微不同的事情：

var myFunc = function() {
  baguetteBox.run('.step_div');
};

$(document).ready(myFunc);
$(document).on('page:load', myFunc); // Classic Turbolinks
$(document).on('turbolinks:load', myFunc); // Turbolinks 5

这样，您的函数将在标准页面就绪触发器上被调用，并且当 turbolinks 将页面加载到内存中而没有实际的页面刷新时。 显然，您只需要为您正在使用的适当版本的 turbolinks 包含 turbolinks 事件触发器。

在这里查看由 turbolinks 5 触发的其他事件：https://github.com/turbolinks/turbolinks#full-list-of-events

对于原始的 turbolinks，文档在这里： https://github.com/rails/turbolinks/#events