Jquery第一次没有在Rail 6页面上运行答案

【问题标题】：Jquery not running on Rail 6 page the first timeJquery第一次没有在Rail 6页面上运行
【发布时间】：2021-07-15 05:36:30
【问题描述】：

我有一个在 Rails 6 应用程序中运行的 jquery 函数。当用户更改选择下拉列表中的值时，jquery 会切换几个 div 以显示或隐藏它们。我遇到的问题是第一次访问页面时 jquery 没有运行。如果我更改字段，则不会发生任何事情。如果我刷新页面，则 jquery 开始正常工作。我是否缺少使 jquery 第一次运行的东西？

这是jquery；

 $(function() {
        $("#costing_type").change(function() {
          $("#fixed_cost_div").toggle($("#costing_type").val() == "1");
          $("#markup_percent_div").toggle($("#costing_type").val() == "2");
          return false;
        });
      });

它在一个名为 test2 的文件中，这是我在 application.js 文件中所要求的

import 'bootstrap'
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// require("packs/custom")
// require("packs/posts.js")
require("jquery")
// require("jquery_ujs")
// require("custom/test")
require("custom/test2")

layouts/application.html.erb 里面有 javascript 标签

<head>
    <title>Test</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://kit.fontawesome.com/c124a87536.js" crossorigin="anonymous"></script>
  </head>

我不知道为什么它第一次不起作用。感谢您的帮助！

【问题讨论】：

确保你的函数在页面完全加载后运行，比如 $(document).ready(function () {// call your stuff here }
您也可能遇到local: true 可能会在加载页面时排序的问题......尽管@Grumpy 的解决方案如果适合您会很棒

标签： javascript jquery ruby-on-rails ruby-on-rails-6

【解决方案1】：

您似乎正在使用 turbolinks。然后不再在每次页面更改时触发 jquery 加载事件。像这样使用：

document.addEventListener("turbolinks:load", function() {
  $("#costing_type").change(function() {
    $("#fixed_cost_div").toggle($("#costing_type").val() == "1");
    $("#markup_percent_div").toggle($("#costing_type").val() == "2");
    return false;
  });
});

如果你不知道它的作用，或者删除 turbolinks。

【讨论】：

非常感谢，您是对的，删除 turbolinks 已解决问题。非常感谢。
不客气。请将答案标记为正确。