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

Question

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

我已经尝试在我的 application.js 中重新安排我的 =require statments，这是我认为可能的每一种方式。

//= 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 .

开发环境没有问题，但是 Production running Rails 5.1.4 with Passenger Standalone with Turbolinks 5. 就不行了。

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

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

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

例子:

...
<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 而不是实际 block 吗？

这是我的头的样子。

<%= 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 文件中。您需要小心避免使用内联脚本和 turbolinks 重复事件监听器。例如，如果我重新访问带有示例代码的页面，它会添加另一个 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>