私は次のコードでいくつかの奇妙な行動を観察してきたそれを投稿して「送信」コールバックと$アヤックス

Question

を使用するときにフォームが複数回提出：

$.fn.submit_to_remote = function() { 
    // I use .each instead of the .submit directly so I can save 
    // the 'submitEnabled' variable separately for each form 
    jQuery.each($(this), function() { 
    $(this).submit(function() { 
     form = $(this); 
     if (form.data('submitEnabled') == false) { alert('disabled'); return false; } 
     form.data('submitEnabled', false); 
     $.ajax({type: 'POST', url: 'url', data: data, dataType: 'script', 
     success: function(script) { 
      alert('success') 
     } 
     }) 
     return false; 
    }) 
    }) 
} 
$('.submit_to_remote').submit_to_remote(); 

だから、基本的には、上submit_to_remoteを呼び出すときにそれは通常の送信を無効にし、AJAX POSTリクエストを行います。

奇妙なことは、「無効」アラートが表示されるため、フォームが複数回転記されることです。ご覧のとおり、私はフォームオブジェクトに保存された "変数"を使用し、変数がフォームがすでにサブミットされているかどうかを確認することによってこれを防止しています。

さらにテストすると、AJAX呼び出しによって返されたスクリプトが原因と思われます。私がやっていることを少し説明してみましょう。もっと明確です。

フォームがサーバーに送信され、スクリプトが返されます。スクリプトはフォームを再度表示しますが、今回は一部のフィールドでエラーメッセージが表示されます。フォームが完全に置き換えられていることに注意してください。

スクリプトは、新しいフォームを表示すると、これを実行します。

$('.submit_to_remote').submit_to_remote(); 

私がしなければならないそうでなければ、あなたがもう一度送信ボタンをクリックすると、フォームが正常に送信されるので、その、無AJAX。

ユーザーがフォームを送信し、適切なエラーで返されたとします（「無効」アラートは表示されません）。それから彼はそれを再び提出する。今回は「無効」アラートが1回表示されます。今度は彼はもう一度それを提出し、今度はアラートが2回表示されます！それで...

したがって、.submitコールバックが各リクエストで何度も何度も追加されているようですが、なぜですか？

.html（）を使用すると、元のフォームが幽霊か何かのままになることはありますか？

ありがとうございます！

PS：それは関連性の場合は、ここでは$アヤックスの呼び出しによって返されたスクリプトです：この奇妙な動作について

replace_content_with = 'the form and other stuff here'; 
$('.page-content').html(replace_content_with); 
$('.submit_to_remote').submit_to_remote(); 

Answer 1

わからないが、しかし、提出イベントのバインドを解除すると、トリックを行うだろうと思われます。

ので、$アヤックスの呼び出しによって返されたスクリプトを実行する前に、これを実行します。以前のバインディングを削除し、ちょうど新しいものを残す必要があります

$('.submit_to_remote').unbind("submit"); 

を。

Answer 2

はい、私はSebに同意します。あなたが望む要素に現在バインドされていないことが確実でない限り、常にバインド前にバインドを解除することをお勧めします。 '.submit'、 '.click'、 '.mouseover'などの機能を使用するだけで、事故時にあなたのものを二重に束縛することができます。

は（私のために失敗することはありません）これを行うのが習慣に取得します。

$('.some_element').unbind('submit').bind('submit',function() { 
    // do stuff here... 
}); 

...代わりに：

$('.some_element').submit(function() { 
    // do stuff here... 
}); 

Answer 3

私のためにアンバインドが機能しませんでした。これはやった：

$(document).off('submit'); 
$(document).on('submit',"#element_id",function(e){ 
    e.preventDefault(); 
    //do something 
}); 

私はそれが役に立てば幸い...実際のアンバインドで

（）あなたには、いくつかの検証を持っているし、提出する前に戻る場合はあなたにいくつかのトラブルをもたらすことができます。例：この場合

$(document).on('submit',"#element_id",function(e){ 
    e.preventDefault(); 
    $(document).unbind('submit'); 
    var name = $(this).children('input[name="name"]').val(); 
    if(name == 'wrong name') 
     return; 

    //do something 
}); 

あなたは、入力が「間違った名前」でフォームは送信されず、その後、あなたは「右の名前」、$（文書）.onを入れたときに（「提出」の場合..トリガーされることはありません、どちらもe.preventDefault（）;及びフォームは、通常の方法で提出される

Answer 4

はjQueryの（提出することに注意してください）イベントを探します：フォームで <input type="submit">, <input type="image">, or <button type="submit">（http://api.jquery.com/submit/いくつかのフレームワークではtype属性が "submit"にデフォルト設定されているので、デフォルトを上書きしようとしている場合は、type属性を何かに変更して複数回送信しないようにしてください。

Answer 5

OpenCart double submitは、common.jsに送信バインドがあるために発生します。

ではなく、と一致するフォームのidパターンを使用することでこれを避けることができます。"form-"です。例えば、<form id="myform" >。

Answer 6

あなたが解決するために、このコードを使用することができます：

$(this).submit(function() { 
. 
. 
. 
}); 

$(this).unbind("submit"); 

Answer 7

簡単まだです：

$(".some-class").off().submit(function() { 
    //Do stuff here 
}); 

Answer 8

私は同じ問題を抱えていたし、クリックを使用して以下のように固定しました。

$('.submit_to_remote').on('click', function(){ 
//Some validation or other stuff 
$(this).submit(); 
});