Jquery 不是运行第一次出现在 Rail 6 页面上

Question

我在 Rails 6 应用程序中有一个 jquery 函数运行ning。当用户更改 select 下拉列表中的值时，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>

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

Answer 1

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

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 的作用，请删除它。

Jquery 不是运行第一次出现在 Rail 6 页面上

Jquery not running on Rail 6 page the first time

javascript

jquery

ruby-on-rails

ruby-on-rails-6

Jquery 不是 运行 第一次出现在 Rail 6 页面上

Jquery not running on Rail 6 page the first time

javascript

jquery

ruby-on-rails

ruby-on-rails-6

Jquery 不是运行第一次出现在 Rail 6 页面上