Rails中JQuery无法识别模态框.submit-button的问题求助

我正在排查为何JQuery无法定位模态框中的.submit-button元素，相关代码编写在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");
});

模态框HTML代码 #

<!-- 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>

问题原因与解决方法 #

核心原因 #

项目使用了Hotwire Turbo，它通过AJAX动态加载页面内容，模态框的.submit-button可能在初始页面加载时并未渲染到DOM中，而你的jQuery事件绑定代码在初始加载时就执行了，无法绑定到后续动态生成的元素。同时Turbo替换了传统的$(document).ready()触发逻辑，需要监听特定事件确保代码在内容加载完成后执行。

修复方案 #

1. 调整事件绑定时机：将jQuery代码包裹在turbo:load事件回调中，确保在Turbo完成页面加载后执行：

// 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"
import "jquery" // 确保引入jQuery

document.addEventListener('turbo:load', function() {
  $(document).on("click", ".submit-button", function () {
      alert("click");
  });
});

2. 确保jQuery正确引入：在config/importmap.rb中添加配置：

pin "jquery", to: "https://code.jquery.com/jquery-3.7.1.min.js"

3. 额外检查项：

• 用浏览器开发者工具的Elements面板，确认按钮确实带有submit-button类名，无拼写错误。
• 检查按钮是否被其他元素遮挡，导致点击事件无法触发。

内容的提问来源于stack exchange，提问作者Benjamin Sunderland