JavaScript不能在Rails/JQuery中使用

bhmjp9jg  于 2023-10-17  发布在  jQuery
关注(0)|答案(3)|浏览(94)

我试图弄清楚为什么JavaScript无法从模态中找到.submit-button。我的JavaScript在application.js中,但我不知道我做错了什么。我是否应该将我的jQuery代码 Package 在其他东西中?

**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>
mgdq6dx1

mgdq6dx11#

由于在application.js的顶部有关于importmaps的注解,因此使用this library
你可以这样固定jQuery(我从你的答案中获取URL,你可以使用from 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");
});
35g0bw71

35g0bw712#

在获取error Uncaught ReferenceError: $ is not defined时,我在head标签之间添加了<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>。我在gem文件中有gem 'jquery-rails',但不知道rails为什么这样做,但问题解决了。

mm5n2pyu

mm5n2pyu3#

在2023年,你真的需要jQuery吗?

document.addEventListener("click", (event)=>{
  if (!event.target.matches(".submit-button")) return;
  alert("click!");
});

今天的浏览器API是如此的好,以至于没有它也一样容易。
如果你要做更复杂的事情,你可以使用Stimulus

相关问题