Semantic UI: $(...).calendar 不是函数

Question

我正在运行ning Rails 版本 5.2.4 以下是我在 Ruby 对 Rails

的看法的相关部分

      <div class="two fields">

            <div class="field">
                <label>Start date and time</label>
                <div class="ui calendar" id="standard_calendar">
                    <div class="ui input left icon">
                        <i class="calendar icon"></i>
                        <input type="text" placeholder="Date/Time">
                    </div>
                </div>
            </div>

            <div class="field">
            <label>End time</label>
                <div class="ui calendar" id="time_calendar">
                    <div class="ui input left icon">
                        <i class="time icon"></i>
                        <input type="text" placeholder="Time">
                    </div>
                </div>
            </div>
        </div>

我将以下代码放在我的视图下方

<script>
console.log("Before scripts run")
$('#standard_calendar').calendar();
$('#time_calendar').calendar({type: 'time'});
console.log("After scripts run")
</script>

为了确保代码运行，我输入了 console.log，它运行良好。但是，当我尝试运行两个 jquery 脚本时，它停在第一个并说

$(...).calendar is not a function

我已经安装了 gem、'fomantic-ui-sass' 和 'jquery-rails'，它们都在工作（至少 omantic 的 css 是）。我也将它们添加到 application.js 文件夹中，如下所示：

//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
// Loads all Semantic javascripts
//= require semantic-ui
// Load jquery
// = require jquery
// = require jquery_ujs

我的app/views/layouts/application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <%= favicon_link_tag 'spring-cleaners-logos/profile.png' %>
    <title>Spring Cleaners - <%= yield(:title) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="ui secondary  menu">
      <a class="item" href="/">
        <%= image_tag 'spring-cleaners-logos/profile.png', alt: 'Logo', class: 'image' %>
        Spring Cleaners
      </a>
      <div class="right menu">
        <a class="item">
          <i class="envelope icon"></i>
          Messages
        </a>
        <a class="item">
          <i class="user icon"></i>
          My Account
        </a>
        <a class="ui item" href="/logout">
          Logout
        </a>
      </div>
    </div>

    <h1><%= yield(:title) %><h1>

    <%= yield %>

  </body>
</html>

为什么它不起作用？我该如何解决？

Answer 1

您的 application.js 有两个潜在问题。

以下行使用 // =（注意 space）而不是 //=。 Rails 指南 The Asset Pipeline - 2.4 Manifest Files and Directives 特别声明使用 //=.
```
// = require jquery
// = require jquery_ujs
```
如果 Semantic-UI 依赖 jQuery 存在，您应该在加载 jQuery 后要求它。否则它会尝试将自己注册为 jQuery 扩展或使用 jQuery 方法而不加载 jQuery。

这意味着移动：
```
// Loads all Semantic javascripts
//= require semantic-ui
```
以下：
```
// Load jquery
//= require jquery
//= require jquery_ujs
```

Semantic UI: $(...).calendar 不是函数

Fomantic UI: $(...).calendar is not a function

ruby-on-rails

semantic-ui

fomantic-ui