当我在表单字段中输入文本时，JavaScript 会中断表单答案

【问题标题】：JavaScript breaks in form when I enter text in the form field当我在表单字段中输入文本时，JavaScript 会中断表单
【发布时间】：2023-03-05 17:19:02
【问题描述】：

我正在尝试创建一个两阶段的用户登录流程。首先用户输入他们所在的企业，然后添加描述。当他们点击提交时，我想隐藏表单的那部分并显示“创建帐户字段”

我正在使用 Devise，并将表单创建为嵌套属性。我编写了 JavaScript 代码，以便它隐藏表单的第一部分，但是当我在字段中输入文本时，它不起作用。代码如下：

应用程序.js

$(document).ready(function () {
    $("#hide").click(function(){
        $(".submit").hide("fast");
    });
    $("#hide").click(function(){
        $("#next").removeClass("hide");
    });
});

设计/注册/new.html.erb

<div class="box">

  <% resource.submissions.build if resource.submissions.empty? %>
      <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>


        <%= f.fields_for :submissions do |submission_form| %>
        <div class="submit">
          <div class="form-group">
            <%= submission_form.label :business, "What industry are you in?" %>
            <%= submission_form.text_field :business, class: "form-control", :autofocus => true  %>
          </div>

          <div class="form-group">
            <%= submission_form.label :description, "Describe your business. Please include a name, URL, and business model." %>
            <br><br>
            <%= submission_form.text_area :description, class: "form-control" %>
          </div>
        </div>
        <% end %>

        <div class="btn btn-lg btn-primary submit" id="hide">Next</div>

      <br>

   <div class="hide" id="next">
    <h2>Create your account.</h2>
      <div class="from-group">
        <%= f.label :name %><br />
        <%= f.text_field :name, class: "form-control", :autofocus => true  %>
      </div>
        <div class="form-group">
          <%= f.label :email %><br />
          <%= f.email_field :email, autofocus: false, class: "form-control" %>
        </div>

        <div class="form-group">
          <%= f.label :password %>
          <% if @validatable %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
          <% end %><br />
          <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
        </div>

        <div class="form-group">
          <%= f.label :password_confirmation %><br />
          <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
        </div>

        <div class="form-group">
          <%= f.submit "Sign up", class: "btn btn-primary" %>
        </div>
      </div>
  <% end %>

     <%= render "devise/shared/links" %>
  </div>

我很难调试这个，因为我对 JavaScript 和 Rails 还很陌生。这是我第一次在 Rails 应用程序中编写自定义 JavaScript，所以我确定我错过了一些简单的东西。关于导致此问题的原因以及如何解决它的任何想法？

【问题讨论】：

您的示例对 $(".submit").hide("fast"); 没有任何作用你想用它做什么？
嘿@daniel，当您单击下一个按钮时，它会隐藏 div 中的所有内容，其中 class= "submit"。到目前为止，这是可行的，但如果我在该表单的视图中输入文本，那么它会破坏 JS。当你点击下一个按钮时，什么也没有发生。
看看这个 CodePen 应该可以工作：codepen.io/anon/pen/QyymQm

标签： javascript jquery ruby-on-rails forms

【解决方案1】：

我找到了我的问题的答案。事实证明，turbo 链接正在破坏我的 Jquery 代码，直到我刷新页面。我在这里找到了答案：

JQuery gets loaded only on page refresh in Rails 4 application

【讨论】：