1

送信ボタンのないjqueryダイアログにフォームがあります。代わりに、[OK] ダイアログ ボタンをクリックして送信します。

したがって、[OK] をクリックすると、次のようになります。

var data = $('#form').serialize();
$.post('page.php',data)
  .success( function(result) {

  // result might be description of an error or other problem, then I display error
  ...
  // or ok, then I hide form and change OK button, so now it closes the dialog
  ...
  myDialog.dialog( "option", "buttons", [{ text: ok, click: function() { $(this).dialog("close"); } }] );    

 });

それは正常に動作します。フォームのデータは行であり、後でページのテーブルに表示されます。しかし、ユーザーがN行を送信し、3xNの新しい行を取得したという報告が何度かありました。そのため、OK クリック機能が変更される前に、フォームを誤って 3 回送信してしまったようです。

これがどのように起こるかわかりません。OKボタンをダブルクリックまたはトリプルクリックするために多くのことを試みましたが、結果は

  • データは一度送信されました
  • フォームは非表示になりませんでした
  • フォームが非表示になっていない場合でも、[OK] をクリックするとダイアログが閉じ、何も送信されませんでした

だから私はあなたのアドバイスが必要です。彼女が同じフォームを何度も送信しないようにするにはどうすればよいですか?

4

2 に答える 2

1

代わりに one() を使用できます。

$("#submitButton").one("click", function() {
  //ajax code here
});
于 2012-06-15T09:28:42.270 に答える
1

一度クリックしたら、ボタンからクリックイベントリスナーのバインドを解除することをお勧めします。これは単純な解決策かもしれませんが、うまくいくと思います。

$('#submitButton').click(function(){

    $(this).unbind('click');

    var data = $('#form').serialize();

    $.post('page.php',data).success( function(result) {
        // result might be description of an error or other problem, then I display error
        ...
        // or ok, then I hide form and change OK button, so now it closes the dialog
        ...
        myDialog.dialog( "option", "buttons", [{ text: ok, click: function() {
        $(this).dialog("close"); } }] );    
    });
});

編集

フォームの結果が無効な場合にクリック機能を再バインドする場合:

$('#submitButton').click(function(){
    submitForm();
});

function submitForm();    
    $('#submitButton').unbind('click');

    var data = $('#form').serialize();

    $.post('page.php',data).success( function(result) {
        // result might be description of an error or other problem, then I display error

        // if result invalid rebind the click event
        if(resultInvalid){
            $('#submitButton').click(function(){
                submitForm();
            });
        }
        // or ok, then I hide form and change OK button, so now it closes the dialog
        ...
        myDialog.dialog( "option", "buttons", [{ text: ok, click: function() {
        $(this).dialog("close"); } }] );    
    });
}
于 2012-06-15T08:59:28.447 に答える