Javascript Rails4Turbo链接阻止jQuery脚本工作

我正在构建一个Rails 4应用程序，我有一些分散的js文件，我正在尝试包括“Rails方式”。我将jquery插件移动到/vendor/assets/javascripts中，并更新了清单（application.js）以需要它们。当我在本地加载页面时，我看到它们显示正确

然而，我从编译的一个脚本中得到了不一致的行为。我有一个特定于控制器的js文件，名为projects.js，通过使用

require\u树在application.js中引用该文件。

：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require jquery.form.min
//= require_tree .

我看到该文件包含正确，它的工作。。。一半的时间。另一半的时间里，projects.js中的东西似乎什么都没做（主要是jquery动画和一些ajax请求）。当它不起作用时，我会单击按钮几次，什么也不会发生，然后抛出以下错误：

Uncaught TypeError: Cannot read property 'position' of null 
turbolinks.js?body=1:75

当脚本位于各个视图中时（以错误的方式）从未发生过这种情况，因此我相当确定问题不在于我的javascript代码。另一个可能相关的细节是projects.js中的内容被包装在一个

$（document）.ready（function（）{

）中。另外，我正在开发模式下进行测试，这样javascripts和css就不会被资产管道组合起来

知道这是怎么回事吗？我对Rails还不熟悉，但我已经尽了最大努力遵守所有的惯例

更新！

当我的项目脚本不起作用时，这是可以预测的。第一个页面加载每次都起作用。然后我单击一个链接到一个使用我的project.js行为的新页面，第二个页面永远不起作用。我单击几次，最后抛出上面的错误。我仍然不确定原因，但我怀疑这与turbo链接有关。

$（document）.ready（function（）{

实际上不适用于TurboLink.：

…使web应用程序中的以下链接更快。它不允许浏览器在每次页面更改之间重新编译JavaScript和CSS，而是使当前页面实例保持活动状态，并仅替换头部的正文和标题

因此，页面只加载一次，然后根据需要替换部分。由于页面只加载一次，因此只有在最初访问站点时才会触发

$（document）.ready（）

回调，因为TurboLink实际上不会切换页面，因此切换页面时不会获得更多文档就绪事件。从：

使用Turbolinks，页面将在不完全重新加载的情况下更改，因此您不能依靠

DOMContentLoaded

或

jQuery.ready（）

来触发代码。相反，Turbolinks会在文档上触发事件，以提供页面生命周期的挂钩

您可能希望监听其中一个TurboLink事件：

• page:change

  该页面已被解析并更改为新版本，并且已加载
• [……]

• page:load

  在加载过程结束时触发

page:change

通常是您要查找的内容，因为它是在加载新页面并从Turbolinks页面缓存还原页面时触发的

您可能想关闭TurboLink，直到您有时间查看JavaScript的所有内容，并完成全面的QA扫描。您还应该测试站点的速度，看看它是否值得使用

---

另一个选择是使用修补程序为您修补。我没有使用过，但正在使用它以获得良好的效果。

此网站已经提供了解决方案

这里有一个例子（我喜欢使用的例子）

---

这就解决了这个问题，让你可以继续用老方法来做。效果非常好：）

我意识到这个答案真的很晚了……但我想我应该加上它

我上个星期刚遇到这个问题……在努力工作的基础上…< /P> 首先，我补充说：

gem 'jquery-turbolinks'

然后将其放入

application.js

中，如下所示：

//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .

然后我在它的正下方添加了这个：

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

});

---

一切都对我有帮助。希望这能有所帮助！

谢谢！！你会从我的更新（刚刚添加）中看到，你所说的与我所看到的完全一致。但是我有点困惑，我的“页面特定”是什么（如果有的话）js代码应该包装在其中。例如，如果我将所有内容都放在application.js中，我是否应该直接跳入事件中，等等？

No$（文档）.ready…

？仔细想想，您的答案解决了这个问题。Turbo链接正在阻止ready事件。因此，我创建了一个新问题来解决后续问题：Turbo链接文档说它会触发自己的

页面：…

文档上的事件

文档
So
$（文档）。On（'page:change'，function（）{…}）
等等。对于rails 5，您可以简单地说
$（文档）。在（'turbolinks:load'，function（）{…}）；
单行解决方案（CoffeeScript）：
$（文档）.在“ready page:load”（准备页面：加载）上，这篇文章用一个很好的例子解决了这个问题。这是使用Haml吗？我不知道如何将你的答案翻译成常规的javascriptNo这是CoffeeScript。关于如何翻译的例子，请将上面的代码粘贴到这页的右侧文本框中：很好的gem调用！你真的不需要
jquery turbolinks
gem了。新的turbolinks 5工作正常
$(document).on('turbolinks:load', function() {

});