Сохранить Перестали работать после того, как первый успешный представить

Question

У меня есть простая форма в приложении рельсов, которая визуализируется в пределах парциальных называемых roster_panel:

<div id = 'active_admin_content'> 
    <%= semantic_form_for @roster_item do |form| %> 
     <h3>Add a counselor</h3> 
     <div id="counselor_status_message"><%= @status_message %></div> 
     <%= form.inputs do %> 
      <%= form.input :first_name, input_html: {id: 'counselor_first_name'} %> 
      <%= form.input :last_name, input_html: {id: 'counselor_last_name'} %> 
      <%= form.input :email, input_html: {id: 'counselor_email'} %> 
     <div class="button_container" > 
     <input id="submit_counselor_add" type="button" value = "Send forms packet" class = "button" > 
     </div> 
     <% end %> 
    <% end %> 
</div> 

В моей JQuery коде, я связать представить нажмите на это:

$(document).on('turbolinks:load', function() { 
    $("#submit_counselor_add").click(function(){ 
     $.get("add_counselor_info" , { id: $("#roster_id").text(), first_name: $("#counselor_first_name").val(), 
       last_name: $("#counselor_last_name").val(), counselor_email: $("#counselor_email").val() }, 
      function(data){ $("#roster_panel").html(data); 
      } 
     ) 
    }); 
}); 

Это маршруты к этому методу контроллера:

def add_counselor_info 
    @roster = Roster.find(params[:id]) 
    @group = ScheduledGroup.find(@roster.group_id) 
    @liaison = Liaison.find(@group.liaison_id) 
    @items = RosterItem.where(roster_id: @roster.id) 
    @roster_item = RosterItem.new(group_id: @group.id, roster_id: @roster.id, 
           first_name: params[:first_name], last_name: params[:last_name], 
           email: params[:counselor_email], youth: false, item_status: 'Unconfirmed') 
    if @roster_item.save 
    @error_count = 0 
    @status_message = 'This counselor has been added and the forms package has been emailed. You may enter another counselor.' 
    @items = RosterItem.where(roster_id: @roster.id) 
    @roster_item = RosterItem.new 
    else 
    @error_count = @roster_item.errors.size 
    @status_message = "#{@error_count} errors prevented saving this information: " 
    @roster_item.errors.full_messages.each { | message | @status_message << message << ' '} 
    @items = RosterItem.where(roster_id: @roster.id) 
    end 
    render partial: 'roster_panel' 

конец

После новой загрузки страницы этот процесс работает нормально и повторно отображает форму, как ожидалось. Однако в этот момент кнопка отправки больше не запускает действие в jquery. Однако другие функции jquery на странице все еще работают. Это может иметь какое-то отношение к турболинкам, с которыми я не очень хорошо знаком.

Любая помощь будет оценена!

Answer 1

После отправки формы DOM заменяется на новую, поэтому on click привязка события теряется.

Попытки связать это событие через родительский элемент, который не будет переопределен JavaScript (например, тело):

$(document).on('turbolinks:load', function() { 
    $("body").on('click', '#submit_counselor_add', function() { 
    $.get("add_counselor_info", { 
     id: $("#roster_id").text(), 
     first_name: $("#counselor_first_name").val(), 
     last_name: $("#counselor_last_name").val(), 
     counselor_email: $("#counselor_email").val() 
    },function(data) { 
     $("#roster_panel").html(data); 
    }); 
    }); 
});