JQuery One イベントを使用することもできます。
ダブルクリックに対するほとんどのガードは、すばやくダブルクリックすることで回避できることがわかりました。one イベントを使用することは、イベントが 1 回だけ発生することを確認する唯一の真の方法です。この手法は、input type=submit タグを使用して「すぐに」機能するとは思いません。代わりに、単純に input type=button またはJQueryUI の .button()を使用できます。
$("#submitButton").one("click", function(event) {
$('#theForm').submit();
});
検証エラー (またはその他の状況) でイベントを再配線する必要がある場合は、イベント ハンドラー用の関数を作成することをお勧めします。この例では、イベント ハンドラーがフォームを送信するだけであるため、関数は必要ありませんが、より複雑なシナリオでは、同じことを繰り返さないようにしたい場合があります。
function submitClick(event) {
$('#theForm').submit();
}
$("#submitButton").one('click', function(event) {
submitClick(event);
});
// This handler will re-wire the event when the form is invalid.
$('#theForm').submit(function(event) {
if (!$(this).valid()) {
event.preventDefault();
$('#submitButton').one('click', function(event) { submitClick(event); });
}
});
ボタンが機能しなくなったことをユーザーにフィードバックしたい場合は、ここに無効化コードを追加できます。One イベントを使用することの大きな副作用の 1 つは、実際にボタンを無効にする必要がなく、独自のスタイルを使用できることです。
function submitClick(event) {
$('#submitButton').addClass('disabledButton');
$('#theForm').submit();
}
$("#submitButton").one('click', function(event) {
submitClick(event);
});
// This handler will re-wire the event when the form is invalid.
$('#theForm').submit(function(event) {
if (!$(this).valid()) {
event.preventDefault();
$('#submitButton').one('click', function(event) { submitClick(event); });
$('#submitButton').removeClass('disabledButton');
}
});
JQuery One イベント: http://api.jquery.com/one/