javascript - jQuery .ajax() の前に 1 回のクリックのみを許可する

Question

ボタンを 1 回だけクリックして、一部のデータを ajax 経由で送信できるようにしようとしています。私が直面している問題は、ユーザーが 50x をクリックでき、データが毎回 POST 送信されることです。

jQuery("#id").unbind('click');

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        location.reload(true);
    }
});

#ID ユーザーが 100 回クリックした場合、データが 1 回だけ送信されるようにするにはどうすればよいですか? そして、#ID が再度有効になりますか?

score 10 · Accepted Answer

.one()jQueryで関数を使用できます。

jQuery("#id").one('click', function()
{
    jQuery.ajax({
        type: "POST",
        url: ajax_url,
        data: ajax_data,
        cache: false,
        success: function (html) {
            location.reload(true);
        }
    });
});

これにより、クリックイベントが完全に削除されることに注意してください。たとえ ajax にエラーがあったとしても、再度クリックすることはできません。

score 5 · Accepted Answer

ボタンを無効にするだけ

$("#id").attr("disabled", "disabled")

そして、成功関数でそれを有効にします

$("#id").removeAttr("disabled")

score 2 · Accepted Answer

最も簡単な方法は、成功が発生したときにリセットされるフラグを使用することです。

if(clicked == False){
    clicked = True;
    jQuery("#id").unbind('click');

    jQuery.ajax({
       type: "POST",
       url: ajax_url,
       data: ajax_data,
       cache: false,
       success: function (html) {
           location.reload(true);
           clicked = False;
       },
       error: function () {
            alert("Error happened");
           clicked = False;
       }
    });
}

score 0 · Accepted Answer

クリックイベントでボタンを無効にし、ajax リクエストが完了したときに再び有効にすることができます。

score 0 · Accepted Answer

クリックイベントでは、ボタンを無効にしてから、ajax イベントの成功関数でボタンを再度有効にすることができます。

別のオプションは、ボタンがクリックされたことを示すためにクリックされている要素にパラメーターを設定し、それが設定されているかどうかを確認し、そうでない場合は ajax リクエストを送信せず、送信することです。ajax が完了したら、パラメーターを再度設定解除して、実行できるようにすることができます。

score 0 · Accepted Answer

これを試して：

$(document).ajaxStart({ function() {
 $('#submit_button').click(function(){
   return false;
 });
});

ここで: #submit_buttonは、無効にしたい要素の ID です

そのコードは送信ボタンのクリックを無効にします

score 0 · Accepted Answer

コントロールを無効にするか、多くのモーダルライブラリの 1 つを使用して糸車を表示できます。

SOに関するこのJqueryモーダルダイアログの質問を参照してください

javascript - jQuery .ajax() の前に 1 回のクリックのみを許可する

7 に答える 7

Related

Reference