除非我刷新，否则javascript不会加载

Question

我用$(document).ready()编写了一些jquery，但是除非刷新页面，否则这些jquery代码不会在我的页面上运行。然后，它会在每次后续刷新时起作用。为什么会这样呢？

我只是添加了javascript和html标签，但我正在使用一个rails应用程序，我不确定这是否会使事情变得复杂。

Answer 1

根据您的turbolinks版本，您必须使用正确的语法来覆盖文档加载事件。对于turbolinks 5：

而不是

$(document). ready(function () {
....
})

使用

var documentready = function(){

}
$(document). on('turbolinks:load',  documentready); 

这将在刷新时优雅地回退到文档就绪事件。

为什么这是必要的？

Turbolinks绑定位置更改(如点击链接)，并使用Ajax加载部分。文档未加载。此外，它还操纵浏览器的历史记录来记录访问。

因此，不会在每次访问时加载资产。快地。这就是为什么document ready不会绑定所有事件，除非所有的监听器都是body或document下的目标(例如$("body").on("click","selector",function()...而不是$("selector").on('click', function()...

Answer 2

出现这个问题是因为旧版本的turbolinks中的一些关键事件与新的turbolinks 5不兼容。

我建议下载gem jquery-turbolinks，确保需要application.js

//= require jquery
//= require jquery.turbolinks
......

兼容性脚本.You可以找到脚本here，只需在assets/javascripts下创建一个compatibility.coffee

这将允许您使用旧的语法。$(document).ready...