チェックボックスにAjaxフォームが2回送信されるのはなぜですか？

Question

ajaxフォームが2回送信されているときに奇妙な問題が発生しています。

# 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() 

フォームを提出する必要があり、チェックボックスをクリックすると、まだログが、私は以下のようにJSを変更しようとしている

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"} 

それぞれ提出するために、二重が変化approvedに提出示したが、ダブルポストされています続行：

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

私はダブルポストの原因を突き止めようとしています。 Chromeデベロッパーパネルでは、ネットワークタブに2つのポストイベントが表示されますが、どちらもイニシエーター列にまったく同じトレースがあります。

このダブルポストを引き起こす原因は何か、これをデバッグするには賢明なアプローチはありますか？後または$form.submit()下return falseか、これはこの問題が発生して他の誰を助け場合preventDefault()

Answer 1

てみてください、私は最終的にこれらのチェックボックスで有効になって戻ってSwictheryに問題をトレースします。

特に、このページはこの問題の解決に役立ちました。

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

Simpleformは、ラベル、タグ、何らかの理由で、この二重の投稿を原因と

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

のチェックボックスを包むました。

シンプルフォームを維持したかったので、boolean_style: :inlineがラベルタグを削除したので、すべて正しく動作しています。

Answer 2

を使うの追加