Submit stops working after first successful submit

Question

I have a simple form in a rails app that is rendered within a partial called 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>

In my jquery code, I tie the submit click to this:

$( 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);
            }
        )
    });
});

This routes to this controller method:

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'

end

After a fresh page load, this process works fine and redisplays the form as expected. However, at that point the submit button no longer triggers the action in jquery. Other jquery functions on the page still work, however. This may have something to do with turbolinks, which I am not very familiar with.

Any help would be appreciated!

Answer 1

After submitting the form, the DOM is replaced by the new one, so on click event binding is being lost.

Try to bind this event through the parent element, which won't be overridden by javascript (e.g. body):

$( 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);
    });
  });
});