javascript - Rails 每个循环中的 JQuery 错误(未捕获的 ReferenceError : $ is not defined)

Question

我正在尝试使用 JQuery 在编辑表单上为我的 Rails 日期选择器设置一个 hidden_​​field。

问题是这是在弹出窗口中发生的，所以我必须为每个要生成的潜在项目自动生成不同的表单/javascript。 (可能不理想，但就是这样……)

现在是这样的:

<% @items.each do |item| %>
  <div class="col-sm-6 col-lg-4">
    <div class="card">
      <a href="#photo<%= item.id %>" class="open-popup-link">
        <%= image_tag item.photo.variant(auto_orient: true), class: "card-img-top" %>
      </a>
      <div class="card-body">
        <h4 class="card-title color-self text-center" style="margin: 0">
          <%= item.title %> (<%= item.item_date.strftime("%m/%d/%y") %>)
        </h4>
        <p class="card-text">
          <%= item.caption if item.caption != "" %>
        </p>
        <p class="text-center boldest" style="margin: 0"><small>
          <a href="#editPhoto<%= item.id %>" class="open-popup-link color-spouse">Edit</a> |&nbsp;
          <%= link_to "Delete", capsule_capsule_item_path(@capsule, item), method: :delete, data: { confirm: 'Are you sure?' }, class: "color-spouse" %>
        </small></p>
      </div> <!-- card body -->
    </div> <!-- card -->
  </div> <!-- col -->

  <div id="photo<%= item.id %>" class="white-popup mfp-hide">
    <%= image_tag rails_blob_url(item.photo), style: "max-width: 100%" %>
  </div>


  <div id="editPhoto<%= item.id %>" class="white-popup mfp-hide">
    <h2 class="font-script text-center">Edit Photo</h2>
    <%= simple_form_for [@capsule, item] do |f| %>
      <%= f.error_notification %>
      <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

      <div class="form-inputs">
        <div class="form-group">
          <%= f.label :item_date %>
          <input placeholder="Date of Photograph" type="text" id="date<%= item.id %>" class="form-control datepicker"></input>
          <%= f.hidden_field :item_date, id: item.id, class: "hiddenDateField" %>
        </div> <!-- form group -->
        <%= f.input :photo %>
        <%= f.input :title %>
        <%= f.input :caption %>
        <%= f.hidden_field :capsule %>
      </div>

      <div class="form-actions text-center">
        <%= f.button :submit, value: "Confirm Changes", class: "btn btn-danger" %>
      </div>
    <% end %>
  </div> <!-- end popup -->

    <script type="text/javascript">
      console.log("Beginning");
      $('.form_actions').hover(function() {
        console.log("mouseover");
        $('#date<%= item.id %>').on('change', function() {
          var date = $('#date<%= item.id %>').val();
          $('#<%= item.id %>').val(date);
        });
      });
    </script>

<% end %> <!-- each -->

查看控制台，我在页面首次加载时看到“开始”console.log 语句，但我从未看到“鼠标悬停”出现。我尝试了 click、mouseover 和 mousemove 而不是 hover，但我总是得到相同的 Uncaught ReferenceError: $ is not defined 错误在 JS 的那一行。

任何精通 JQuery 的人都可以帮助我纠正这个问题吗？

Answer 1

您的 JavaScript 在加载 JQuery 之前正在执行。为确认暂时注释掉代码并尝试在加载弹出窗口时在控制台上执行它。

$('.form_actions')

如果它仍然给你错误，那么页面上没有加载 JQuery。如果不是，则意味着您的脚本在加载 Jquery 之前加载