$ 未定义 Rails 5.1.4，在随机刷新时定义

Question

这是我没有其他想法的地步。刷新 2/3 次时，jQuery 将工作，然后不工作。

我已经尝试在我的application.js 中重新排列我的 =require 语句，这是我认为可能的所有方式。

//= require jquery
//= require rails-ujs
//= require jquery-ui/widgets/autocomplete
//= require dataTables/jquery.dataTables
//= require js.cookie
//= require materialize-sprockets
//= require selectize
//= require turbolinks
//= require_tree .

开发环境没有问题，但是生产运行 Rails 5.1.4 和带有 Turbolinks 5 的Passenger Standalone。只是无法正常工作。

我尝试将所有$(function() 或$(document). 引用移到下面，但问题仍然存在。

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

我确实有一些代码在块内加载到 .erb 文件中。也许这就是问题所在？

例子：

...
<div class="input-field">
  <select id="case_type" name="case_type">
    <option data-key="blank" value="" disabled selected>Choose a type</option>
    <% @categories_and_types.each do |key,types| %>
      <% data_key = key.gsub(/[^\w]/,'_').downcase %>
      <% types.each do |type| %>
        <option value="<%= type %>" data-key="<%= data_key %>"><%= type %></option>
      <% end %>
    <% end %>
  </select>
  <label>Case Type</label>
</div>

<script>
  document.addEventListener("turbolinks:load", function() {
      if ($('#case_category').data('options') === undefined) {
        $('#case_category').data('options', $('#case_type option').clone());
      }
</script>

...

我需要使用 javascript_tag 代替实际的块吗？

这就是我的头的样子。

<%= javascript_include_tag "application", 'data-turbolinks-track' => true, defer: Rails.env.production? %>

我使用defer 而不是async 是因为有人建议它可以解决此错误。仍然存在。

所以页面加载，未定义的 $ 显示，我做了以下和它的定义。

这没有任何意义。这一定是 Turbolinks BUG 之类的。

有什么想法吗？

Answer 1

我认为问题在于您的内联 <script> 正在执行之前延迟的 application.js 文件已加载。 jQuery 在您的 application.js 文件中编译（带有defer 属性），因此在文档被解析之前将不可用。

如果可能，我建议将所有 JavaScript 代码放在 application.js 文件中。您需要小心避免使用内联脚本和 turbolink 重复事件侦听器。例如，如果我要使用示例代码重新访问该页面，它将添加另一个 turbolinks:load 事件处理程序。因此，要么在离开页面时删除事件监听器，要么将所有脚本放在 application.js 文件中。

相关问题：https://github.com/turbolinks/turbolinks/issues/281

---

除此之外：您的脚本中似乎缺少一些右括号：

  <script>
    document.addEventListener("turbolinks:load", function() {
      if ($('#case_category').data('options') === undefined) {
        $('#case_category').data('options', $('#case_type option').clone());
      }
    });
  </script>