时间戳

首页 > 解决方案 > Jquery第一次没有在Rail 6页面上运行

javascript - Jquery第一次没有在Rail 6页面上运行

问题描述

我有一个在 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>

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

标签： javascriptjqueryruby-on-railsruby-on-rails-6

解决方案

您似乎正在使用涡轮链接。然后不再在每次页面更改时触发 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。

推荐阅读