为什么Ajax表单在复选框更改上提交两次？

我遇到了一个奇怪的问题，其中一个Ajax表单提交两次。为什么Ajax表单在复选框更改上提交两次？

# view 
<%= simple_form_for user, remote: true do |f| %> 
    <%= f.input :approved, 
    as: :boolean, 
    input_html: { class: 'submit-on-select' } %> 
    <%= f.submit %> 
<% end %> 

# js 
$("input:checkbox.submit-on-select").each -> 
    $(this).closest('form').find('input[type="submit"]').each -> 
    $(this).addClass('hidden') 
    $("input:checkbox.submit-on-select").on 'change', -> 
    $form = $(this).closest('form') 
    $form.submit()

点击复选框应提交表单，但日志都出现双与approved提交改变每个提交

Started PATCH "/en/users/23" for 127.0.0.1 at 2017-01-13 07:25:40 +0700 
Processing by UsersController#update as JS 
    Parameters: {"utf8"=>"✓", "user"=>{"approved"=>"0"}, "locale"=>"en", "id"=>"23"} 
Started PATCH "/en/users/23" for 127.0.0.1 at 2017-01-13 07:25:40 +0700 
Processing by UsersController#update as JS 
    Parameters: {"utf8"=>"✓", "user"=>{"approved"=>"1"}, "locale"=>"en", "id"=>"23"}

我曾试图改变JS如下，但双岗继续：

... 
$form.unbind('submit').submit()

我想追查是什么导致双重职位。在Chrome开发人员面板中，网络标签显示两个发布后事件，但它们在发起人列中具有完全相同的跟踪。

什么可能导致这个双重职位，什么是一个明智的方法来调试呢？

来源

2017-01-13 Andy Harvey

您是否尝试禁用Turbolinks？ – Milind

谢谢@Milind我不认为turbolinks在这个应用程序中启用。它不在application.js清单或gemfile中 –

不相关，但不需要使用带'.addClass（）'的'.each'，只需在选择中直接调用它，它就可以对所有内容进行操作。 – Barmar

尝试增加return false后或下$form.submit()或使用preventDefault()

来源

2017-01-13 03:23:17 bxorcloud

Thanks @bxorcloud。添加这些表单后，仍然提交两次。 \t 经过大量的挖掘，我终于追溯到这个复选框启用的Switchery。 abpetkov.github.io/switchery在禁用了Switchery之后，表单只发布一次。任何想法为什么Swicthery应该引起这个双重职位？ –

如果这可以帮助其他人遇到这个问题，我最终追溯到这是对这些复选框启用回Swicthery问题。

具体来说，这个页面帮助解决了这个问题。

https://github.com/abpetkov/switchery/issues/50

Simpleform被包裹的复选框中的标记标签

<label><input type="checkbox"></label>

由于某种原因导致这种双重张贴。

正如我想保持简单形式添加boolean_style: :inline删除标签标签，所有现在正常工作。

来源

2017-01-13 12:22:32

为什么Ajax表单在复选框更改上提交两次？

回答

相关问题