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。


当前回答

根据新的rails指南,正确的方法是这样做:

$(document).on('turbolinks:load', function() {
   console.log('(document).turbolinks:load')
});

或者在coffeescript中:

$(document).on "turbolinks:load", ->
alert "page has loaded!"

不监听事件$(document)。就绪后,只会触发一个事件。没有惊喜,不需要使用jquery。turbolinks宝石。

这不仅适用于rails 5,而且适用于rails 4.2及以上版本。

其他回答

根据新的rails指南,正确的方法是这样做:

$(document).on('turbolinks:load', function() {
   console.log('(document).turbolinks:load')
});

或者在coffeescript中:

$(document).on "turbolinks:load", ->
alert "page has loaded!"

不监听事件$(document)。就绪后,只会触发一个事件。没有惊喜,不需要使用jquery。turbolinks宝石。

这不仅适用于rails 5,而且适用于rails 4.2及以上版本。

首先,安装jquery-turbolinks gem。然后,不要忘记将包含的Javascript文件从application.html.erb的body末尾移动到它的<head>。

如本文所述,如果出于速度优化的原因将应用程序javascript链接放在页脚中,则需要将其移动到标记中,以便它在标记中的内容之前加载。这个解决方案对我很有效。

我是这么做的… CoffeeScript:

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

最后一行监听页面加载,这是什么涡轮链接将触发。

编辑……添加Javascript版本(每个请求):

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

编辑2…对于Rails 5 (Turbolinks 5)页面:load变成了Turbolinks:load,甚至会在初始加载时触发。所以我们可以这样做:

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});

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

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

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