取消绑定点击事件后，jQuery开/关方法无法正常工作

时间：2014-09-02 09:49:37

标签： javascript jquery ajax json

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

警报被触发，因此它到达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';
                    }
                }
            }
        });

2 个答案:

答案 0 :(得分：1)

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

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

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

答案 1 :(得分：1)

您必须执行以下操作，

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

}
相关问题
最新问题