如何在 Rails 5 中正确编写 jQuery 代码（使用 turbolinks 5）答案

【问题标题】：How to write jQuery code properly in Rails 5 (with turbolinks 5)如何在 Rails 5 中正确编写 jQuery 代码（使用 turbolinks 5）
【发布时间】：2017-01-01 17:32:23
【问题描述】：

我正在我的 Rails 5 应用程序中编写 jQuery 代码，看起来代码没有编译。这是我的代码：

application.html.erb

 <%= content_for?(:head) ? yield(:head) : '' %>
    <%= javascript_include_tag "application" %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

应用程序.js

//= require code.js
//= require jquery
//= require fancybox
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .
$.turbo.use('turbolinks:load', 'turbolinks:request-start')

function printpage()
{
   window.print()
}

var resetForms = function () {
  // this depends on your use
  // this is for foundation 6's abide
  $('form').each(function () {
    $(this).foundation('destroy');
  });
};

document.addEventListener("turbolinks:before-cache", function() {
  resetForms();
});

当我尝试在 code.js 中使用 $(document).ready(function(){}); 时它不起作用，但是当我尝试这样的事情时：

document.addEventListener("turbolinks:load", function() {
 alert("ok!")
});

它可以正常工作。我不明白为什么代码可以与其他版本的 Rails 一起工作，这次不行。此外，我可以说我的应用正在使用版本号 5 的 turbolinks

【问题讨论】：

标签： jquery ruby-on-rails turbolinks

【解决方案1】：

$(document).ready(function() {
  resetForms();
});

这不起作用，因为 Turbolinks 覆盖了正常的页面加载过程，它所依赖的事件不会被触发。如果您的代码看起来像这样，则必须更改代码以执行此操作：

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

如果它与其他版本的 rails 一起使用，它可能使用的是旧版本的 turbolinks。

http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks[1]

【讨论】：