第一次成功提交后提交停止工作

Question

我在 rails 应用程序中有一个简单的表单，该表单在名为 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 功能仍然有效。这可能与我不太熟悉的turbolinks有关。

如有任何帮助，我们将不胜感激！

Answer 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);
    });
  });
});

第一次成功提交后提交停止工作

Submit stops working after first successful submit

javascript

jquery

ruby-on-rails

turbolinks