首次成功提交后提交停止工作答案

【问题标题】：Submit stops working after first successful submit首次成功提交后提交停止工作
【发布时间】：2017-02-13 05:24:50
【问题描述】：

我在一个名为 roster_panel 的部分中呈现的 Rails 应用程序中有一个简单的表单：

<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 函数仍然有效。这可能与我不太熟悉的turbolinks有关。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery ruby-on-rails turbolinks

【解决方案1】：

提交表单后，DOM 被新的替换，所以on click 事件绑定正在丢失。

尝试通过父元素绑定该事件，不会被javascript覆盖（例如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);
    });
  });
});

【讨论】：