javascript - 解除绑定(bind)点击事件后，jQuery 开/关方法不起作用

Question

我创建了一个处理大量数据的ajax函数，因此当单击按钮时，可能需要一段时间才能响应。现在，当人们访问该网站时，他们不断点击，这使我的数据库留下了重复的数据。我在 Google 上搜索并找到了 jQuery 的 on 和 off 事件，用于绑定(bind)和取消绑定(bind)点击事件。当函数被触发时，取消绑定(bind)事件起作用，但是当响应无效时，我想再次绑定(bind)单击事件，这在我的情况下不起作用。

警报被触发，因此它到达 on 函数。

有人可以看一下我的函数并看看我做错了什么吗？

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

我认为你应该将事情分开以使其更容易。

此外，您还可以创建一个命名函数作为您的点击事件处理程序回调，您将相应地绑定(bind)/取消绑定(bind)。

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