复制ajax以调用模态并关闭

Question

I have a subscription form which works through modal windows, but when I close the window and return to click the button to subscribe ajax calls are duplicated, which is an error.

            $("#openModal").click(function() {
            if($("#wname").val() == '' || $("#lname").val() == '' || $("#wmail").val() == ''){
                $('#message-error').html("Los campos no pueden estar vacios");
                return;
            }
            $("#message").empty();
            var regex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if (regex.test($('#wmail').val())) {
                $('#myModal').modal('show');
                $('#fin_coach_acept').click(function(event){
                    $('.whmessage').empty();
                    $('#message').empty();
                    datos['usu_nombre'] = $("#wname").val();
                    datos['usu_apellido'] = $("#lname").val();
                    datos['pa_id'] = 32;
                    datos['usu_fechanacimiento'] = '';
                    datos['sexo'] = $("#sexo_e").val();
                    datos['firma'] = '';
                    datos['mail'] = $("#wmail").val();
                    datos['intereses'] = '';
                    datos['rol_id'] = 2;
                    datos['pa_residencia'] = '';
                    datos['curso'] = $(".whcursos").val();
                    datos['contmin'] = $("#contmin").val();
                    datos['contper'] = $("#contper").val();
                    console.log(JSON.stringify(datos));
                    $.ajax({
                        type: "POST",
                        url: "<?php echo home_url(); ?>/wssetcoach.php",
                        data: {datosw: JSON.stringify(datos)},
                        success: function(res){
                            if(res == 'logrado'){
                                $("#message").append("<span style='color:#76292F;'>Usted ya se encuentra registrado como Facilitador con: "+ $("#wmail").val() + "</span>");
                            } else {

                                $('.whmessage').append("<p>¡Gracias por registrarte!. Desde ahora eres parte de ActiveMind. Se enviarán los datos de acceso al Sistema Académico a la cuenta de correo:</p><p>"+$("#wmail").val()+"</p><p>Cualquier consulta envía un correo electrónico a la dirección:</p><p>[e-mail]</p>");
                                $('#final').modal('show');
                                $('#finalize').click(function(event){
                                    $(location).attr('href', 'http://www.activemind.center/active/');
                                });
                                $('#myModal').modal('hide');
                                $('#final').modal('show');
                                $('#coach_cancel').click(function(event){
                                    $('#facilitadorini').modal('hide');
                                    $('#myModal').modal('show');
                                });
                            }
                        }
                    });
                });
            } else {
                $('#message-error').html("El correo no es válido");
                return;
            }
        });

Apparently, manners is kept in memory, it has been used the following code to delete it but does not work: $('#studentini').remove();

Any idea solution will be useful to me, thanks

Answer 1

Look into using jquery's off() method to avoid your click handler being added again each time you open the modal.

var $openBtn = $("#openModal");

$openBtn.off().click(fn);

Or use event delegation to avoid this issue:

var $document = $(document);

document.on('click', '#openModal', fn);