Rails 7 jQuery：未介绍的参考文献：$未定义

Question

通过以下内容添加了jQuery 7.0.2.4项目。

我 ：

pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/dist/jquery.js"

然后在app/javascript/application.js中添加行以导入jQuery：

import '@hotwired/turbo-rails'
import 'controllers'
import 'bootstrap'

import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery

我使用JavaScript的视图：

<%= form_with(model: @micropost) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class='field'>
    <%= f.text_area :content, placeholder: 'Compose new micropost...' %>
  </div>
  <%= f.submit 'Post', class: 'btn btn-primary' %>
  <span class='image'>
    <%= f.file_field :image %>
  </span>
<% end %>

<script type='text/javascript'>
  $('#micropost_image').bind('change', function() {
    if (this.files[0].size/1024/1024 > 5) {
      alert('Maximum file size is 5MB.  Please choose a smaller file.')
      $('#micropost_image').val('')
    }
  })
</script>

当加载视图时，Chrome Console显示：

Uncaught ReferenceError: $ is not defined at (index):103:3

当我选择大于5MB的文件时，消息弹出，所以我认为脚本没有运行。

如何修复它？

Answer 1

尝试以下操作：

window.onload = function() {
  $("#micropost_image").bind("change", function() {
    const size_in_megabytes = this.files[0].size/1024/1024;
    if (size_in_megabytes > 5) {
      alert("Maximum file size is 5MB. Please choose a smaller file.")
      $("#micropost_image").val("");
    }
  });
}