jQuery on/off method not working after unbinding click event

Question

I've created an ajax function that handles a lot of data, so when the button is clicked, it may take a while for a response. Now when people were on the site they kept clicking which left my database with duplicate data. I've Googled and found the on and off event of jQuery for binding and unbinding a click event. When the function gets fired the unbind event works, but when the response is invalid I want to bind the click event again and this is not working in my case.

The alert get's fired so it reaches the on function.

Could someone take a look at my function and see what I'm doing wrong?

    $('#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

I think you should separate things to make it easier.

Also, you can create a named function to work as your click event handler callback, that you will bind/unbind accordingly.

$(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

You have to do something like below,

$('#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';
                }
            }
        }

}