I ran into an issue in my Rails 4 app while trying to organize JS files "the rails way". They were previously scattered across different views. I organized them into separate files and compile them with the assets pipeline. However, I just learned that jQuery's "ready" event doesn't fire on subsequent clicks when turbo-linking is turned on. The first time you load a page it works. But when you click a link, anything inside the ready( function($) { won't get executed (because the page doesn't actually load again). Good explanation: here.

所以我的问题是:什么是确保jQuery事件在涡轮链接打开时正常工作的正确方法?您是否将脚本包装在特定于rails的侦听器中?或者也许rails有某种魔力,使它变得不必要?文档对这应该如何工作有点模糊,特别是关于通过manifest(s)加载多个文件,如application.js。


当前回答

我想我把这个留给那些升级到Turbolinks 5的人:修复代码的最简单的方法是从:

var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)

to:

var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);

参考:https://github.com/turbolinks/turbolinks/issues/9 # issuecomment - 184717346

其他回答

你必须使用:

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

来自turbolinks,博士。

我刚知道另一个解决这个问题的方法。如果你加载jquery-turbolinks宝石,它会将Rails Turbolinks事件绑定到文档上。ready事件,这样你就可以用通常的方式编写jQuery。你只需要添加jquery。在js的manifest文件(默认:application.js)中,Turbolinks就在jquery之后。

$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

以下是我所做的,以确保事情不会执行两次:

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

我发现使用jquery-turbolinks gem或组合$(document)。Ready和$(document).on("page:load")或使用$(document).on("page:change")本身的行为会出乎意料——尤其是在开发过程中。

以上这些都不适合我,我没有使用jQuery的$(document)来解决这个问题。ready,但使用addEventListener代替。

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