提问人：Benjamin Sunderland 提问时间：10/2/2023 更新时间：10/3/2023 访问量：48
Javascript 在 Rails/JQuery 中不起作用
Javascript is not working in Rails/JQuery
问：
我试图弄清楚为什么 javascript 无法从模态中找到 .submit-button。我的javascript在application.js中，但我不明白我做错了什么。我是否应该将我的 JQuery 代码包装在其他东西中？
**application.js**// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "popper"
import "bootstrap"
$(document).on("click", ".submit-button", function () {
alert("click");
});
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Welcome! Please Log in</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<%= simple_form_for(resource, remote: true, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :email,
required: true,
autofocus: true,
input_html: { autocomplete: "email" }%>
<%= f.input :password,
required: true,
hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
input_html: { autocomplete: "new-password" } %>
<%= f.input :password_confirmation,
required: true,
input_html: { autocomplete: "new-password" } %>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up Now", class: 'btn btn-primary submit-button' %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Log In</button>
<%= button_to(
"Log Out",
destroy_user_session_path,
method: :delete
) %>
</div>
</div>
</div>
</div>
答：
0赞
Benjamin Sunderland
10/3/2023
#1
当我得到 .我的 gemfile 中有 gem 'jquery-rails'，但不确定为什么 rails 要这样做，但是问题解决了。<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>error Uncaught ReferenceError: $ is not defined
评论
0赞
max
10/3/2023
jquery-rails gem 实际上是 Rails 5.1 （2017） 中抛弃 jQuery 依赖项之前的旧 Rails javascript 助手。它不应该被使用，因为它从那时起几乎没有更新，并且与Turbo的功能重叠。它也仅适用于旧的 Sprockets 资产管道，而不是导入地图。
2赞
mechnicov
10/3/2023
#2
由于您在 的顶部有关于 importmaps 的评论，因此请使用此库application.js
你可以以这种方式固定jQuery（我从你的答案中获取了URL，你可以从jsDelivr或其他来源使用）
# config/importmap.rb
# ... your existing pins
pin "jquery", to: "https://code.jquery.com/jquery-3.5.1.min.js"
和导入
// app/javascript/application.js
import "@hotwired/turbo-rails"
import "controllers"
import "jquery"
import "popper"
import "bootstrap"
$(document).on("click", ".submit-button", function () {
alert("click");
});
0赞
max
10/3/2023
#3
2023 年你真的需要 jQuery 吗？
document.addEventListener("click", (event)=>{
if (!event.target.matches(".submit-button")) return;
alert("click!");
});
今天的浏览器 API 要好得多，因此没有它也很容易做到。
如果你正在做任何更复杂的事情，你可以使用刺激。
评论
$