【问题标题】:Why 'javascript_pack_tag' only works in the 'body' and not the html 'head' (Rails 6 and webpack)为什么'javascript_pack_tag'只适用于'body'而不是html'head'(Rails 6和webpack)
【发布时间】:2020-08-07 23:27:11
【问题描述】:

在我的 rails 6 应用程序中,我的 jquery 仅在我将 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 包含在 html 的“body”而不是“head”时才有效。我想知道为什么会出现这种情况以及我需要做些什么来解决它。这是我的 application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TumaJobs</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= render 'shared/navbar' %>
    <%= render 'shared/flashes' %>
    <table class="layout-table">
      <tr class="layout-content-row">
        <td class="layout-content-column">
          <%= yield %>
        </td>
      </tr>
      <tr>
        <td>
          <%= render 'shared/footer' %>
        </td>
      </tr>
    </table>
  </body>
</html>

在我的 application.js 中,我有

require("bootstrap/dist/js/bootstrap")
require("jquery")
window.jQuery = $;
window.$ = $;

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("../search")

require("trix")
require("@rails/actiontext")

在 search.js 我有这个 jquery 代码

  $(".jobs_search input").keyup(function() {
    $.get($(".jobs_search").attr("action"), $(".jobs_search").serialize(), null, "script");
    return false;
  });

【问题讨论】:

    标签: jquery ruby-on-rails ruby webpack turbolinks


    【解决方案1】:

    试试这个

    javascript_pack_tag 在头

    $(document).on('turbolinks:load', function(){
      $(".jobs_search input").keyup(function() {
        $.get($(".jobs_search").attr("action"), $(".jobs_search").serialize(), null, "script");
        return false;
      });
    })
    

    【讨论】:

    • 它有效,谢谢。如果您不介意,您能简要解释一下为什么它现在有效吗?
    猜你喜欢
    • 2021-04-08
    • 2012-10-10
    • 1970-01-01
    • 2013-06-23
    • 1970-01-01
    • 2019-06-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多