Very peculiar - submit once the first time, twice

Question

Working with a modal form that submits edited information via ajax post. The thing is, it submitted once the first time .. fire up the modal form again, then submit, and twice it goes and so on and so forth. Does anyone had this sort of experience before? Please help.

$("#editInfo").click(function () {
    valform = ["realname","email"];
    valneed = 2;
    $('#smallModal .modal-body').empty();
    $('#smallModal .modal-body').load('/profile.php?action=profile_edit_info');
    $('#smallModal .modal-title').text('Edit Personal Information');
    $('#smallModal').modal('show')

    $('#smallModal').on('shown.bs.modal', function () {
        $("#smallModal #profileeditinfoform").keydown(function(event){
        if(event.keyCode == 13 && event.target.nodeName!='TEXTAREA')
            {
                event.preventDefault();
                return false;
            }
        });

        $("#realname_comment").hide();
        $("#email_comment").hide();

        $('#realname').bind("change", function() {
            $('#realname').addClass("spinner");
            var v_realname = verifyVar($('#realname').val(),'name');
            displayVerify(v_realname,'realname');
        });

        $('#email').bind("change", function() {
            $('#email').addClass("spinner");
            var v_email = verifyVar($('#email').val(),'email');
            displayVerify(v_email,'email');
        });

        $("#editinfo_submit_btn").click(function(event) {
            event.preventDefault();
            $('#loader').fadeIn();

            formData = $("#profileeditinfoform").serialize();
            var v_submit = submitEditInfo(formData);
            verifySubmitEditInfo(v_submit);

            $('#loader').fadeOut();
        });
    });
});

function submitEditInfo(data) {
    var alldata = data + '&action=profileeditinfo';
    return $.ajax({
        type: 'POST',
        cache: false,
        data: alldata,
        url: '/ajax/submit.php'
    });
}

function verifySubmitEditInfo(ajaxCall) {
        ajaxCall.success(function(realData) {
                response = JSON.parse(realData)
                if (!response.success) {
                    $.gritter.add({
                        title: response.title,
                        image: '/img/custom/fail.png',
                        sticky: false,
                        text: response.message
                    });
                } else {
                    valform = [];
                    $("#submitdiv").hide();
                    $("#profileeditinfoform").find("input:text").val('');
                    $('#infodiv').slideUp(200).load('/divloader.php?req=profile_info').slideDown(200);
                    $.gritter.add({
                        title: response.title,
                        image: '/img/custom/success.png',
                        sticky: false,
                        text: response.message
                    });
                    $("#smallModal").modal('hide');
                }
        });
}

Answer 1

Every time you click, you're adding a new event handler:

$('#smallModal').on('shown.bs.modal' //...

Are you sure you want to do this on "click", or might it be better to set this up outside of the click handler?

In fact, you're binding event handlers as a response to other events all over this code. That's probably not a great idea, unless you unbind them once you're done.

Answer 2

You need to pull out your binders, you bind a new time every time the button is clicked! Only bind on load, not under button click event.