Rails 4 turbo链接防止jQuery脚本工作
我正在构build一个Rails 4应用程序，我有几个分散的js文件，我试图包含“rails方式”。 我把jquery插件移动到/ vendor / assets / javascripts，我更新了清单（application.js）来要求它们。 当我在本地加载页面时，我发现它们显示正确。
但是，从编译的脚本中收到不一致的行为。 我有一个控制器特定的js文件，名为projects.js，通过使用require_tree .在application.js中引用require_tree . ：
//= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap.min //= require jquery.form.min //= require_tree .
我看到文件包含正确，它的工作…一半的时间。 另一半时间，在projects.js中的东西似乎没有做任何事情（这主要是jQuery的animation和一些AJAX请求）。 当它不起作用时，我会单击button几次，什么都不会发生，然后我会抛出这个错误：
Uncaught TypeError: Cannot read property 'position' of null turbolinks.js?body=1:75
当脚本在单独的视图（错误的方式），这从来没有发生，所以我相当肯定这个问题是不是我的JavaScript代码。 另一个潜在的相关细节是，items.js中的东西被封装在$(document).ready(function(){ 。另外，我在开发模式下进行testing，所以javascripts和css没有被资产pipe道。
任何想法发生了什么？ 我是Rails的新手，但我已经尽力遵循所有的约定。
更新！
当我的项目脚本不起作用时，这是可预测的。 首次加载的页面每次都有效。 然后我点击一个链接到一个新的页面，使用我的project.js行为， 第二个页面从不工作。 我点击几下，最后抛出上面的错误。 我仍然不确定为什么，但我怀疑这与涡轮增压有关。
$(document).ready(function(){并不真正与Turbolinks一起使用Turbolinks ：
…使您的Web应用程序中的以下链接更快。 而不是让浏览器重新编译每个页面之间的JavaScript和CSS变化，它保持当前页面实例活着，只replace头部的正文和标题。
所以页面只加载一次，然后根据需要replace件。 由于该页面只加载一次，因此只有在初次访问站点时才会触发$(document).ready()callback，因此在切换页面时不会获得更多的文档就绪事件，因为Turbolink实际上并不切换页面。 从精美的手册 ：
与Turbolinks页面将改变没有一个完整的重新加载，所以你不能依靠
DOMContentLoaded或jQuery.ready()来触发你的代码。 相反，Turbolinks会在文档上触发事件来为页面的生命周期提供钩子。
您可能想要倾听Turbolinks事件之一：
page:change页面已被parsing并更改为新版本和DOMContentLoaded- […]
page:load加载过程结束时触发加载。
page:change通常是您要查找的内容，因为在加载新页面和从Turbolinks页面caching中恢复页面时会触发page:change 。
您可能需要closuresTurbolinks，直到您有时间查看所有 JavaScript并完成了完整的QA扫描。 你也应该testing你的网站的速度，看它是否值得使用。
另一个select是使用jquery.turbolinks为你修补一些东西。 我没有使用这个，但其他人正在使用它，以达到良好的效果。
这个railscast中已经有了一个解决scheme
这是一个例子（我喜欢使用的一个例子）。
ready = -> # ..... your js $(document).ready(ready) $(document).on('page:load', ready)
还有一种解决这个问题的方法，可以让你继续这样做。 它工作得很好:)
我意识到这个答案是REAAAAAAALLLLLLLYYYYY晚…但我想我会添加它。
上周我刚刚有这个问题..当试图让基金会工作..
首先我补充说：
gem 'jquery-turbolinks'
然后放置在application.js如下所示：
//= require jquery.turbolinks //= require jquery_ujs //= require turbolinks //= require_tree .
然后我在下面添加它：
$(document).on('turbolinks:load', function() { });
一切都为我工作。 希望这可以帮助！
