JavaScript разрывается в форме при вводе текста в поле формы

Question

Я пытаюсь создать двухэтапного пользователя на посадке. Первые пользователи вводят в свой бизнес, а затем добавляют описание. Когда они нажимают кнопку «Отправить», я хочу скрыть эту часть формы и показать «Создать поля учетной записи»

Я использую Devise, и я создал формы как вложенный атрибут. Я написал код 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. Это мой первый раз, когда я писал собственный JavaScript в Rails-приложении, поэтому я уверен, что мне не хватает чего-то простого. Любые идеи о том, что вызывает это и как его исправить?

Answer 1

Я нашел ответ на свой вопрос. Оказывается, турбо-ссылки ломают мой код JQuery, пока я не обновил страницу. Я нашел ответ здесь: ("отправить ").

JQuery gets loaded only on page refresh in Rails 4 application