Jquery trap form submit（）

Question

私は現在jqueryを使用してフォームの投稿をトラップし、確認用のダイアログを表示しています。ユーザーが「はい」をクリックすると、フォームが送信されます。ユーザーが「いいえ」をクリックすると、ダイアログが閉じます。

これはすべてうまくいきますが、1つの問題があります。ユーザーが「はい」をクリックすると、同じコードが再びトリガーされ、ダイアログが再度開きます。

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        $("#myform").submit(); 
        return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

私はこれがなぜ起こっているのか理解していますが、それを回避する最善の方法についてはわかりません。私は、フォーム提出の代わりにボタンクリックでモーダルを表示することができることを認識していますが、これはキーボードの入力ボタンを押してフォームを送信するユーザーの問題を回避しません。

Answer 1

フォームをsubmitとき、submitイベントは再びので、イベントハンドラをトリガしているため。ユーザーがOKと言う場合、submitイベントハンドラをunbindにする必要があります。この

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        //Check this line - unbinding the submit event handler 
        $("#myform").unbind('submit').submit(); 
        return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

Answer 2

ときOKあなたはfalseを返す必要があります：

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        $("#myform").submit(); 
        return false; // <=== not just return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

または手動削除が提出：

buttons: { 
"OK": function() { 
    $dialog.dialog('close'); 
    //$("#myform").submit(); <-- delete it 
    return; 
}, 

Answer 3

が、私はそうのようないくつかの隠し入力からsomething名前空間のグローバル、または値のどちらかになるだろうしてみてください。

var something = nameSpaced.something || $('#hiddenInput').val(); //your choice 
if (something) { 
    ... 
} ... 

あなたのロジックはその後、正常に動作するはずです。

Answer 4

フォームを送信するためにjQueryオブジェクトを使用するIntesteadでは、jQueryオブジェクトが参照するDOM要素を使用してフォームを送信できます。これは、jQueryイベントハンドラをバイパスします。 OK機能は次のようになります。

"OK": function() { 
    $dialog.dialog('close'); 
    $("#myform").get(0).submit(); // use the underlying DOM element to sumbit 
    return false; 
},