turbolinks导致js代码只能运行一次的解决办法

本站使用的是Rails框架开发的,并且有第三方的js. 其中有一个回到顶部的功能,部署时发现回到顶部的按钮只能成功运行一次,当浏览到其他页面后立即失效.本能反应应该是turbolinks的坑.

首先想到的是禁用turbolinks

在application.js 中删去

//= require turbolinks

然后在apploication.html.erb中删去

'data-turbolinks-track': 'reload'

问题完美解决.

但从另一方面来考虑,既然Rails中引入turbolinks,是为了加快页面的打开速度,如果直接弃用岂不是很可惜

于是去turbolinks的github看文档

turbolinks

turbolinks用

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

})

替换了JQuery中的

$(document).ready(function(){

})

因此只需要把第三方js的回到顶部的功能拎出来这样写即可

turbolinks-load

这样问题也解决了

仔细分析了一下这个问题的原因

1. $(document).ready 依赖于 DOMContentLoaded 事件

2. Turbolinks 接管页面后换页不会产生 DOMContentLoaded，所以换页之后 $(document).ready 无效

3. Turbolinks 提供了 turbolinks:load 取代 $(document).ready