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

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

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

application.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，所以我确信我遗漏了一些简单的东西。你知道是什么原因导致了这种情况，以及如何解决它吗？

我找到了问题的答案。事实证明，在我刷新页面之前，turbolinks一直在破坏我的Jquery代码。我在这里找到了答案：

---

您的样本不使用$（“.submit”）.hide（“fast”）；你想用它做什么？嘿@daniel当你点击下一步按钮时，它会用class=“submit”隐藏div中的所有内容。到目前为止，这是可行的，但如果我在该表单的视图中输入文本，则会破坏JS。单击“下一步”按钮时，什么也没有发生。请参阅此代码笔应该可以工作：