取消綁定單擊事件后，jQuery開/關方法不起作用

Question

我創建了一個處理大量數據的ajax函數，因此單擊按鈕時，可能需要一段時間才能做出響應。 現在，當人們在站點上時，他們不斷單擊，這使我的數據庫中出現了重復數據。 我已經用Google搜索並找到了用於綁定和取消綁定click事件的jQuery on和off事件。 當函數被觸發時，unbind事件起作用，但是當響應無效時，我想再次綁定click事件，在我的情況下不起作用。

警報被觸發，因此達到了打開功能。

有人可以看看我的功能，看看我在做什么錯嗎？

    $('#afrekenen').click(function(){
        $('#afrekenen').off("click");
        clearInterval(myInterval);
        var fields = $('.addressform :input');
        $.each(fields, function(field,val){
            $(val).removeClass('errorInput');
        })
        var gegevens = {};
        var adresform = $('.addressform').serializeArray();
        $.each(adresform, function(index, val){
            gegevens[this.name] = this.value;
        });
        if(!$('input[name=payment]:checked').val()){
            var betaalwijze = 0;
        }else{
            var betaalwijze = $('input[name=payment]:checked').val();
        }

        var voorwaarden = $('input[name=voorwaarden]:checked').val();

        $.ajax({
            type: 'post',
            url: '/inc/afrekenen.php',
            data: {"gegevens":gegevens ,"betaalwijze":betaalwijze,"voorwaarden":voorwaarden},
            fail: function() { 
                $('#afrekenen').on("click"); 
                $('#errormsg').html('<div class="alert alert-danger">'+
                    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Oops something went wrong. please try again</div>');
            },
            success: function(data) {
                response = jQuery.parseJSON(data)
                if(response.isValid == false){
                    alert('hoi');
                    $('#afrekenen').on("click");
                    $('#errormsg').html('<div class="alert alert-danger">'+
                    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'
                    +response.message+'</div>');

                    $.each(response.fouteVelden, function(index, object){
                        $('#'+object+'').addClass('errorInput');
                    });
                }else{

                    if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(response.message)) {
                                window.location.href = response.message;
                    } else {
                        window.location.href = 'winkelwagen.php?step=afgerond';
                    }
                }
            }
        });

Answer 1

我認為您應該將事情分開以使其更容易。

另外，您可以創建一個命名函數來用作您的click事件處理程序回調，您將據此進行綁定/取消綁定。

$(function () {
    // This will toggle the click event handler on/off.
    function toggleClickHandler(toggle) {
        if (toggle === true) {
            $('#afrekenen').on('click', processMyRequest);
        } else {
            $('#afrekenen').off('click', processMyRequest);
        }
    }

    // This will process your request (AJAX call).
    var processMyRequest = function() {
        toggleClickHandler(false);
        clearInterval(myInterval);

        var fields = $('.addressform :input');

        $.each(fields, function (field, val) {
            $(val).removeClass('errorInput');
        });

        var gegevens = {};
        var adresform = $('.addressform').serializeArray();

        $.each(adresform, function (index, val) {
            gegevens[this.name] = this.value;
        });

        // Unrelated to the question:
        // Note that before you had the variable "betaalwijze" declared
        // twice using var. This is wrong, so I've fixed it.
        var betaalwijze;

        if (!$('input[name=payment]:checked').val()) {
            betaalwijze = 0;
        } else {
            betaalwijze = $('input[name=payment]:checked').val();
        }

        var voorwaarden = $('input[name=voorwaarden]:checked').val();

        $.ajax({
            type: 'post',
            url: '/inc/afrekenen.php',
            data: {
                "gegevens": gegevens,
                    "betaalwijze": betaalwijze,
                    "voorwaarden": voorwaarden
            },
            success: function (data) {
                response = jQuery.parseJSON(data);

                if (response.isValid === false) {
                    alert('hoi');
                    toggleClickHandler(true);

                    $('#errormsg').html('<div class="alert alert-danger">' +
                        '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + response.message + '</div>');

                    $.each(response.fouteVelden, function (index, object) {
                        $('#' + object + '').addClass('errorInput');
                    });
                } else {
                    if (/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(response.message)) {
                        window.location.href = response.message;
                    } else {
                        window.location.href = 'winkelwagen.php?step=afgerond';
                    }
                }
            }
        }).fail(function () {
            // AJAX call has failed.
            toggleClickHandler(true);
        });
    };

    // When the document is loaded, attach the click event handler
    // by default.
    toggleClickHandler(true);
});

Answer 2

您必須執行以下操作

$('#afrekenen').click(function(){
    myAjaxFunctionality();        
});

function myAjaxFunctionality()
{
 $('#afrekenen').off("click");
clearInterval(myInterval);
    var fields = $('.addressform :input');
    $.each(fields, function(field,val){
        $(val).removeClass('errorInput');
    })
    var gegevens = {};
    var adresform = $('.addressform').serializeArray();
    $.each(adresform, function(index, val){
        gegevens[this.name] = this.value;
    });
    if(!$('input[name=payment]:checked').val()){
        var betaalwijze = 0;
    }else{
        var betaalwijze = $('input[name=payment]:checked').val();
    }

    var voorwaarden = $('input[name=voorwaarden]:checked').val();

    $.ajax({
        type: 'post',
        url: '/inc/afrekenen.php',
        data: {"gegevens":gegevens ,"betaalwijze":betaalwijze,"voorwaarden":voorwaarden},
        success: function(data) {
            response = jQuery.parseJSON(data)
            if(response.isValid == false){
                alert('hoi');
                $('#afrekenen').on("click", function(){myAjaxFunctionality();});
                $('#errormsg').html('<div class="alert alert-danger">'+
                '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'
                +response.message+'</div>');

                $.each(response.fouteVelden, function(index, object){
                    $('#'+object+'').addClass('errorInput');
                });
            }else{

                if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(response.message)) {
                            window.location.href = response.message;
                } else {
                    window.location.href = 'winkelwagen.php?step=afgerond';
                }
            }
        }

}