Rails 4：如何将 $(document).ready() 与 turbo-links 一起使用

这就是我所做的...... 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)，page:load 变为 turbolinks:load，甚至会在初始加载时触发。所以我们可以做到以下几点：

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

  ...your javascript goes here...

});

---

我刚刚了解到解决此问题的另一种选择。如果您加载 the jquery-turbolinks gem，它会将 Rails Turbolinks 事件绑定到 document.ready 事件，这样您就可以以通常的方式编写 jQuery。您只需在 js 清单文件中的 jquery 之后添加 jquery.turbolinks（默认情况下：application.js）。

---

最近我发现了最干净、最容易理解的处理方式：

$(document).on 'ready page:load', ->
  # Actions to do

或者

$(document).on('ready page:load', function () {
  // Actions to do
});

编辑
如果您已将 delegated events 绑定到 document，请确保将它们附加到 ready 函数之外，否则它们将在每个 page:load 事件上反弹（导致相同的功能要运行多次）。例如，如果您有这样的电话：

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

将它们从 ready 函数中取出，如下所示：

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

$(document).on 'click', '.button', ->
  ...

绑定到 document 的委托事件不需要绑定到 ready 事件。

---

在 Rails 4 documentation 中找到了这个，类似于 DemoZluk 的解决方案，但略短：

$(document).on 'page:change', ->
  # Actions to do

或者

$(document).on('page:change', function () {
  // Actions to do
});

如果您有调用 $(document).ready() 的外部脚本，或者如果您不想重写所有现有的 JavaScript，那么此 gem 允许您继续将 $(document).ready() 与 TurboLinks 一起使用：https://github.com/kossnocorp/jquery.turbolinks

---

根据新的 rails guides，正确的方法是执行以下操作：

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

或者，在咖啡脚本中：

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

不要监听事件 $(document).ready，只会触发一个事件。毫不奇怪，无需使用 jquery.turbolinks gem。

这适用于 rails 4.2 及更高版本，不仅适用于 rails 5。

---

注意：请参阅@SDP 的答案以获得干净的内置解决方案

我将其修复如下：

通过更改包含顺序，确保在包含其他依赖于应用程序的 js 文件之前包含 application.js：

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

定义一个处理 application.js 中的绑定的全局函数

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

现在您可以绑定以下内容：

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

---

以上都不适合我，我通过不使用 jQuery 的 $(document).ready 解决了这个问题，而是使用 addEventListener。

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

---

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

---

你必须使用：

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

from turbolinks doc。

---

要么使用

$(document).on "page:load", attachRatingHandler

或者使用jQuery的.on函数来达到同样的效果

$(document).on 'click', 'span.star', attachRatingHandler

有关详细信息，请参见此处：http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

---

您可能希望在 page:load 触发时触发 ready 事件，而不是使用变量来保存“就绪”函数并将其绑定到事件。

$(document).on('page:load', function() {
  $(document).trigger('ready');
});

---

这是我为确保事情不会执行两次所做的工作：

$(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") 的行为会出乎意料 - 特别是如果您正在开发中。

---

我发现以下 article 对我很有用，并详细说明了以下内容的使用：

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)

---

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

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

至：

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

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

---

$(document).ready(ready)  

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

---

测试了这么多解决方案终于到了这个。这么多你的代码绝对不会被调用两次。

var has_loaded=false; var ready = function() { if(!has_loaded){ has_loaded=true; // 这里是你的 } } $(document).ready(ready); $(document).bind('page:change', ready);

---

我通常为我的 rails 4 项目执行以下操作：

在 application.js

function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}

然后在其余的 .js 文件中，我不使用 $(function (){})，而是调用 onInit(function(){})

---

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

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

---

我发现在使用 ready 和 turbolinks:load 的函数时我的函数加倍，所以我使用了，

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

这样，如果支持 turbolinks，您的功能就不会翻倍！

---