Can't figure out why this ajax request fires two times

Question

I am working on this snippet of code, but I can't figure out why the ajax request is firing up twice when I click the selected button:

   $('#passwd-nuova').blur(function() {
        var response = $('#passwd-nuova').validate({
            'classeform': 'form-utenti',
            'empty': 'passwd-nuova'
        });
        if (!response.empty) {
            $('#reset').addClass('btn-disabled');
        } else {
            $('#reset').removeClass('btn-disabled');
            /*
             * RESET PASSWORD PANNELLO
             */
            $('#reset').on('click', function() {
                    var new_passwd = $('input[name=passwd-nuova]').val();
                    var selezionato = $(this).loadID({
                        'nometabella': 'utenti',
                        'abbr': 'utenti'
                    });
                    var send_email = $('#cb-email').prop('checked');
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: "/gutenti/",
                        dataType: "json",
                        data: {
                            'mod-passwd': true,
                            'idu': selezionato,
                            'new-passwd': new_passwd,
                            'send-email': send_email
                        },
                        success: function(response) {
                            var tab = $("#datatable_utenti").dataTable();
                            $('#modal-reset').modal('hide');
                            tab.fnDraw();
                            $(window).scrollTop(0);
                            $(document).genAlert({
                                tipo: 'success',
                                msg: 'modifica completata con successo',
                                time: 800
                            });
                            $('input').each(function() {
                                $(this).val('');
                            });
                            $("#datatable_utenti tbody").compileForm({
                                'abbr': 'utenti',
                                'nometabellaDB': 'admin_utenti',
                                'nometabella': 'utenti'
                            });
                            $(document).stato(profile, 'base');
                            return;
                        },
                        error: function() {
                            console.log("errore async");
                            $('#modal-reset').modal('hide');
                            $(window).scrollTop(0);

                            $(document).genAlert({
                                tipo: 'error',
                                msg: 'qualcosa è andato storto, riprova',
                                time: 800
                            });
                        }
                    });
                    return;

            });
        }

    });

I've tried to disable the button after the call, and also to return nothing to exit from the function, but nothing has worked.

Answer 1

I have called the function inside the blur funciton. However; The function is going to be called also when you click the #reset button. I hope it works.

$('#passwd-nuova').blur(function() {
        var response = $('#passwd-nuova').validate({
            'classeform': 'form-utenti',
            'empty': 'passwd-nuova'
        });
        if (!response.empty) {
            $('#reset').addClass('btn-disabled');
        } else {
            $('#reset').removeClass('btn-disabled');
            /*
             * RESET PASSWORD PANNELLO
             */
            $('#reset').click();
        }

    });


     $('#reset').on('click', function() {
        var new_passwd = $('input[name=passwd-nuova]').val();
        var selezionato = $(this).loadID({
            'nometabella': 'utenti',
            'abbr': 'utenti'
        });
        var send_email = $('#cb-email').prop('checked');
        $.ajax({
            cache: false,
            type: "POST",
            url: "/gutenti/",
            dataType: "json",
            data: {
                'mod-passwd': true,
                'idu': selezionato,
                'new-passwd': new_passwd,
                'send-email': send_email
            },
            success: function(response) {
                var tab = $("#datatable_utenti").dataTable();
                $('#modal-reset').modal('hide');
                tab.fnDraw();
                $(window).scrollTop(0);
                $(document).genAlert({
                    tipo: 'success',
                    msg: 'modifica completata con successo',
                    time: 800
                });
                $('input').each(function() {
                    $(this).val('');
                });
                $("#datatable_utenti tbody").compileForm({
                    'abbr': 'utenti',
                    'nometabellaDB': 'admin_utenti',
                    'nometabella': 'utenti'
                });
                $(document).stato(profile, 'base');
                return;
            },
            error: function() {
                console.log("errore async");
                $('#modal-reset').modal('hide');
                $(window).scrollTop(0);

                $(document).genAlert({
                    tipo: 'error',
                    msg: 'qualcosa è andato storto, riprova',
                    time: 800
                });
            }
        });
        return;

    });

Answer 2

I guess that this line:

$('#reset').on('click', function() {
........

runs more than once(on each blur).

You can bind an event more than once with no problem.

Check if this solves your problem:

$('#reset').off('click').on('click',function(){ .....

If it does, then try to move the "event attachment" to a different place.

Jquery - 'on' and 'off'

Answer 3

Try unbind / bind the click callback:

var callback = function () { ... }
$('#reset').unbind('click', callback);
$('#reset').bind('click', callback);

If you attach the click event twice, it will get called two times.

Answer 4

Your $('#passwd-nuova').blur handler binds the $('#reset').click' handler multiple times.

I'm glad my comment helped you out ;)