1

En mi página web, al hacer clic en el nombre de un usuario se despliega un modal Bootstrap con el perfil del usuario. El modal depende de un script jQuery que crea elementos HTML dinámicamente, entre ellos una caja de texto y un botón para enviarle un mensaje privado al usuario.

He delegado el envío de mensajes, con lo cual funciona, pero hay un comportamiento anómalo: si despliegas el modal del usuario 1 y envías un mensaje, le llega al usuario 1, pero si a continuación despliegas el modal del usuario 2 y le envías un mensaje, se envían dos mensajes, al 1 y al 2; si de nuevo abres el modal del usuario 1 y envías un mensaje, esta vez se envían 3 mensajes, uno al 1, otro al 2 y y de nuevo uno al 1, y así sucesivamente.

El script es el siguiente:

$(function() 
{
    $('.nombre-usuario').click(function() //Cuando se hace clic en el nombre de usuario
    {
        var nombreUsuario = $(this).text(); //Captura el nombre
        var idUsuario = $(this).data('id-usuario'); //Captura también su id inserta en un parámetro HTML de tipo "data" por si posteriormente se quiere enviar un mensaje privado

        $.ajax( //Hace una petición AJaX para recabar su información personal y mostrarla en el modal
        {
            type: 'POST', 
            url: '../ajax_recuperar_datos_personales.php',
            dataType: 'json',
            data: {nombre_usuario: nombreUsuario},
            success: function(respuesta)
            {
                if(!$.isEmptyObject(respuesta)) //Si el json tiene contenido, pinta esto
                {
                    $('.cuerpo-usuario').text(''); //Se elimina todo el contenido que pudiera haber previamente en el modal

                    var divPadre = $(document.createElement('div')) //1. Div que contiene todo
                    .addClass('row')
                    .prependTo('.cuerpo-usuario');

                        var divFoto = $(document.createElement('div')) //1.1. Div columna que contiene a la foto
                        .addClass('col-4').addClass('d-flex').addClass('align-items-center')
                        .prependTo(divPadre);

                            var foto = $(document.createElement('img'))
                            .css("border-radius", "10px")
                            .attr('src', respuesta.rutaFoto).attr('width', '240').attr('height', '180')
                            .prependTo(divFoto);

                        var divResto = $(document.createElement('div')) //1.2. Div columna que contiene el resto de elementos
                        .addClass('col-8')
                        .appendTo(divPadre);

                            var divTexto = $(document.createElement('div')) //1.2.1. Div que contiene la descripción del usuario
                            .addClass('letra-perfil').addClass('pb-3')
                            .prependTo(divResto);

                                var inicio = $(document.createElement('span'))
                                .text('A ')
                                .prependTo(divTexto);

                                var usuario = $(document.createElement('span'))
                                .css('color', 'mediumvioletred')
                                .text(nombreUsuario)
                                .insertAfter(inicio);

                                var conector1 = $(document.createElement('span'))
                                .text(' le gustaría montar una banda de ')
                                .insertAfter(usuario);

                                var nombreSubestilo = $(document.createElement('span'))
                                .css('color', 'mediumvioletred')
                                .text(respuesta.subestilo)
                                .insertAfter(conector1);

                                var conector2 = $(document.createElement('span'))
                                .text(' en ')
                                .insertAfter(nombreSubestilo);

                                var nombreCiudadFavorita = $(document.createElement('span'))
                                .text(respuesta.ciudadFavorita)
                                .insertAfter(conector2);

                                var conector3 = $(document.createElement('span'))
                                .text(', pero se conforma con escuchar ')
                                .insertAfter(nombreCiudadFavorita);

                                var nombreformato = $(document.createElement('span'))
                                .text(respuesta.formato)
                                .insertAfter(conector3);

                                var conector4 = $(document.createElement('span'))
                                .text('s de ')
                                .insertAfter(nombreformato);

                                var nombreAutor = $(document.createElement('span'))
                                .css('color', 'mediumvioletred')
                                .text(respuesta.autor)
                                .insertAfter(conector4);

                                var conector5 = $(document.createElement('span'))
                                .text(' en ')
                                .insertAfter(nombreAutor);

                                var nombreCiudadActual = $(document.createElement('span'))
                                .text(respuesta.ciudadActual)
                                .insertAfter(conector5);

                                var puntos = $(document.createElement('span'))
                                .text('...')
                                .insertAfter(nombreCiudadActual);

                            var divFormulario = $(document.createElement('div')) //1.2.2. Div con la caja de texto y los botones
                            .appendTo(divResto);

                                var divCaja = $(document.createElement('div')) //1.2.2.1. Div con la caja de texto
                                .prependTo(divFormulario);

                                    var cajaTexto = $(document.createElement('textarea'))
                                    .addClass('form-control').addClass('caja-modal')
                                    .attr('placeholder', `¿Quieres enviarle un mensaje privado a ${nombreUsuario}?`).attr('maxlength', '200').attr('rows', '2')
                                    .prependTo(divCaja);

                                var divBotones = $(document.createElement('div')) //1.2.2.2. Div con los botones
                                .addClass('d-flex').addClass('justify-content-center').addClass('pt-2')
                                .appendTo(divFormulario);

                                    var boton1 = $(document.createElement('button'))
                                    .addClass('btn').addClass('btn-info').addClass('btn-sm').addClass('mr-1').addClass('envio-mensaje')
                                    .attr('type', 'submit')
                                    .html('¡Adelante!')
                                    .prependTo(divBotones);

                                    var boton2 = $(document.createElement('button'))
                                    .addClass('btn').addClass('btn-info').addClass('btn-sm').addClass('borrado-modal')
                                    .attr('type', 'reset')
                                    .text('Algo no me convence...')
                                    .insertAfter(boton1);
                }
                else //Si no tiene contenido -es null- esto otro
                {
                    $('.cuerpo-usuario').text('');

                    var divPadre = $(document.createElement('div')) //1. Div que contiene todo
                    .addClass('row')
                    .prependTo('.cuerpo-usuario');

                        var divFoto = $(document.createElement('div')) //1.1. Div columna que contiene la foto
                        .addClass('col-4').addClass('d-flex').addClass('align-items-center')
                        .prependTo(divPadre);

                            var foto = $(document.createElement('img'))
                            .addClass('pl-5')
                            .css("border-radius", "10px")
                            .attr('src', 'http://localhost/recopilatorios/php/web/mvc/recursos/imagenes/varias/interrogante.jpg').attr('width', '192').attr('height', '144')
                            .prependTo(divFoto);

                        var divResto = $(document.createElement('div')) //1.2. Div columna que contiene el resto de elementos
                        .addClass('col-8')
                        .appendTo(divPadre);

                            var divTexto = $(document.createElement('div')) //1.2.1. Div que contiene el mensaje de avertencia
                            .addClass('letra-perfil').addClass('pb-3')
                            .prependTo(divResto);

                                var nombre = $(document.createElement('span'))
                                .css('color', 'mediumvioletred')
                                .text(nombreUsuario)
                                .prependTo(divTexto);

                                var mensaje = $(document.createElement('span'))
                                .text(' aún no ha completado su perfil...')
                                .insertAfter(nombre);

                            var divFormulario = $(document.createElement('div')) //1.2.2. Div con la caja de texto y los botones
                            .appendTo(divResto);

                                var cajaTexto = $(document.createElement('textarea'))
                                .addClass('form-control').addClass('caja-modal')
                                .attr('placeholder', `¿Quieres enviarle un mensaje privado a ${nombreUsuario}?`).attr('maxlength', '200').attr('rows', '2')
                                .prependTo(divFormulario);

                                var divBotones = $(document.createElement('div')) //1.2.2.2. Div que contiene los botones
                                .addClass('d-flex').addClass('justify-content-center').addClass('pt-1')
                                .appendTo(divFormulario);

                                    var boton1 = $(document.createElement('button'))
                                    .addClass('btn').addClass('btn-info').addClass('btn-sm').addClass('mt-2').addClass('mr-1').addClass('envio-mensaje')
                                    .attr('type', 'submit')
                                    .html('¡Adelante!')
                                    .prependTo(divBotones);

                                    var boton2 = $(document.createElement('button'))
                                    .addClass('btn').addClass('btn-info').addClass('btn-sm').addClass('mt-2').addClass('borrado-modal')
                                    .attr("type", "reset")
                                    .text('Algo no me convence...')
                                    .insertAfter(boton1);
                } 
            },
            error: function() //De nuevo, nunca hay error, siempre parece encontrar el archivo
            {
                swal("Vaya...", "Parece que ha ocurrido un error", "error", {button: false});
            }
        })

        $('#modal-usuarios').on('click', '.envio-mensaje', function() //Delegación de eventos para el botón de envío
        {
            var texto = $('.caja-modal').val(); //Captura el texto de la caja del modal
            var idEmisor = $('#id-usuario').text(); //El id del usuario conectado
            var idReceptor = idUsuario; //El id del usuario al que se envía el mensaje
            
            if(texto.length < 1) //Da un aviso en caso de que se intente enviar un mensaje vacío
            {
                swal("Vaya...", "Parece que te has olvidado de lo que ibas a escribir... ;P", "warning", {button: false});

                return false;
            }
            else
            {
                $.ajax( //Hace una petición AJaX para insertar el mensaje en la BD
                {
                    type: 'POST', 
                    url: '../ajax_enviar_mensaje.php',
                    data: {id_emisor: idEmisor, id_receptor: idReceptor, texto: texto},
                    success: function(respuesta)
                    {
                        if(respuesta == 1)
                        {
                            $('.caja-modal').val(''); //Borra la caja de texto para evitar comportamientos maliciosos por parte del usuario

                            swal('¡Genial!', `${nombreUsuario} ha recibido el mensaje`, 'success', {button: false});    
                        } 
                        else swal('Vaya...', `Algo ha fallado; intenta mensajear a ${nombreUsuario} más tarde...`, "error", {button: false});
                    },
                    error: function() //No funciona
                    {
                        swal("Vaya...", "Parece que ha ocurrido un error", "error", {button: false});
                    }
                })
            }
        });

        $('#modal-usuarios').on('click', '.borrado-modal', function(/*e*/) //Delegación de eventos para que el botón de borrado creado dinámicamente funcione
        { 
            //e.preventDefault(); //Al ser creado dinámicamente, el botón no actúa por defecto

            var cajaTexto = $('.caja-modal'); //Captura la caja de texto

            if(cajaTexto.val().length < 1)
            {
                swal("Vaya...", "Parece que no hay nada que borrar... ;P", "warning", {button: false});

                return false;
            }
            else
            {
                swal //Modal para confirmar el borrado
                ({
                    title: '¿Quieres borrar tu comentario?',
                    text: 'Si estás seguro, adelante',
                    icon: 'warning',
                    dangerMode: true, //Resalta el botón para conservar la información
                    closeOnClickOutside: false, //No permite cerrar el modal haciendo clic fuera de él
                    buttons: 
                    {
                        cancel: 
                        {
                            text: 'Realmente no',
                            value: null, //Parámetro que determina si se produce o no el borrado
                            visible: true,
                            className: 'btn btn-outline-secondary',
                            closeModal: true,
                        },
                        confirm: 
                        {
                            text: 'Lo estoy',
                            value: true, //Parámetro que determina si se produce o no el borrado
                            visible: true,
                            className: 'btn btn-danger',
                            closeModal: true,
                        }
                    }
                }).then(function(value){if(value) cajaTexto.val('');}) //Si value = true se borra la caja de texto
            } 
        });
    });
});

Si bien la delegación del evento es sólo esta parte:

$('#modal-usuarios').on('click', '.envio-mensaje', function() //Delegación de eventos para el botón de envío
{
    var texto = $('.caja-modal').val(); //Captura el texto de la caja del modal
    var idEmisor = $('#id-usuario').text(); //El id del usuario conectado
    var idReceptor = idUsuario; //El id del usuario al que se envía el mensaje

    if(texto.length < 1) //Da un aviso en caso de que se intente enviar un mensaje vacío
    {
        swal("Vaya...", "Parece que te has olvidado de lo que ibas a escribir... ;P", "warning", {button: false});

        return false;
    }
    else
    {
        $.ajax( //Hace una petición AJaX para insertar el mensaje en la BD
        {
            type: 'POST', 
            url: '../ajax_enviar_mensaje.php',
            data: {id_emisor: idEmisor, id_receptor: idReceptor, texto: texto},
            success: function(respuesta)
            {
                if(respuesta == 1)
                {
                    $('.caja-modal').val(''); //Borra la caja de texto para evitar comportamientos maliciosos por parte del usuario

                    swal('¡Genial!', `${nombreUsuario} ha recibido el mensaje`, 'success', {button: false});    
                } 
                else swal('Vaya...', `Algo ha fallado; intenta mensajear a ${nombreUsuario} más tarde...`, "error", {button: false});
            },
            error: function() //No funciona
            {
                swal("Vaya...", "Parece que ha ocurrido un error", "error", {button: false});
            }
        })
    }
});

Un ejemplo de lo que muestra la consola si tras la declaración de variables se añade:

    console.log(`Texto: ${texto}`);
    console.log(`Emisor: ${idEmisor}`);
    console.log(`Receptor: ${idReceptor}`);

Y se envía un mensaje a un usuario (el script se ejecuta 1 vez y se envía 1 mensaje), luego a otro (el script se ejecuta 2 veces y se envían 2 mensajes), y finalmente un tercer mensaje de nuevo al primer usuario (el script se ejecuta 3 veces y se envían 3 mensajes); si volviésemos a intentarlo se enviarían 4 mensajes de golpe, luego 5, y así sucesivamente:

introducir la descripción de la imagen aquí

1 respuesta 1

1
+50

Lo que ocurre es que estas asignando los eventos:

  • $('#modal-usuarios').on('click', '.envio-mensaje', ...
  • $('#modal-usuarios').on('click', '.borrado-modal', ...

cada vez que hacen click en $('.nombre-usuario')

La solución es simplemente sacar dichas asignaciones fuera de la función click.

Ejemplo:

$(function() {

  $('.nombre-usuario').click(function() { //Cuando se hace clic en el nombre de usuario

    var nombreUsuario = $(this).text(); //Captura el nombre
    var idUsuario = $(this).data('id-usuario'); //Captura también su id inserta en un parámetro HTML de tipo "data" por si posteriormente se quiere enviar un mensaje privado

    $.ajax({ //Hace una petición AJaX para recabar su información personal y mostrarla en el modal

      type: 'POST',
      url: '../ajax_recuperar_datos_personales.php',
      dataType: 'json',
      data: {
        nombre_usuario: nombreUsuario
      },
      success: function(respuesta) {
        if (!$.isEmptyObject(respuesta)) { //Si el json tiene contenido, pinta esto

          $('.cuerpo-usuario').text(''); //Se elimina todo el contenido que pudiera haber previamente en el modal

          var divPadre = $(document.createElement('div')) //1. Div que contiene todo
            .addClass('row')
            .prependTo('.cuerpo-usuario');

          var divFoto = $(document.createElement('div')) //1.1. Div columna que contiene a la foto
            .addClass('col-4').addClass('d-flex').addClass('align-items-center')
            .prependTo(divPadre);

          var foto = $(document.createElement('img'))
            .css("border-radius", "10px")
            .attr('src', respuesta.rutaFoto).attr('width', '240').attr('height', '180')
            .prependTo(divFoto);

          var divResto = $(document.createElement('div')) //1.2. Div columna que contiene el resto de elementos
            .addClass('col-8')
            .appendTo(divPadre);

          var divTexto = $(document.createElement('div')) //1.2.1. Div que contiene la descripción del usuario
            .addClass('letra-perfil').addClass('pb-3')
            .prependTo(divResto);

          var inicio = $(document.createElement('span'))
            .text('A ')
            .prependTo(divTexto);

          var usuario = $(document.createElement('span'))
            .css('color', 'mediumvioletred')
            .text(nombreUsuario)
            .insertAfter(inicio);

          var conector1 = $(document.createElement('span'))
            .text(' le gustaría montar una banda de ')
            .insertAfter(usuario);

          var nombreSubestilo = $(document.createElement('span'))
            .css('color', 'mediumvioletred')
            .text(respuesta.subestilo)
            .insertAfter(conector1);

          var conector2 = $(document.createElement('span'))
            .text(' en ')
            .insertAfter(nombreSubestilo);

          var nombreCiudadFavorita = $(document.createElement('span'))
            .text(respuesta.ciudadFavorita)
            .insertAfter(conector2);

          var conector3 = $(document.createElement('span'))
            .text(', pero se conforma con escuchar ')
            .insertAfter(nombreCiudadFavorita);

          var nombreformato = $(document.createElement('span'))
            .text(respuesta.formato)
            .insertAfter(conector3);

          var conector4 = $(document.createElement('span'))
            .text('s de ')
            .insertAfter(nombreformato);

          var nombreAutor = $(document.createElement('span'))
            .css('color', 'mediumvioletred')
            .text(respuesta.autor)
            .insertAfter(conector4);

          var conector5 = $(document.createElement('span'))
            .text(' en ')
            .insertAfter(nombreAutor);

          var nombreCiudadActual = $(document.createElement('span'))
            .text(respuesta.ciudadActual)
            .insertAfter(conector5);

          var puntos = $(document.createElement('span'))
            .text('...')
            .insertAfter(nombreCiudadActual);

          var divFormulario = $(document.createElement('div')) //1.2.2. Div con la caja de texto y los botones
            .appendTo(divResto);

          var divCaja = $(document.createElement('div')) //1.2.2.1. Div con la caja de texto
            .prependTo(divFormulario);

          var cajaTexto = $(document.createElement('textarea'))
            .addClass('form-control').addClass('caja-modal')
            .attr('placeholder', `¿Quieres enviarle un mensaje privado a ${nombreUsuario}?`).attr('maxlength', '200').attr('rows', '2')
            .prependTo(divCaja);

          var divBotones = $(document.createElement('div')) //1.2.2.2. Div con los botones
            .addClass('d-flex').addClass('justify-content-center').addClass('pt-2')
            .appendTo(divFormulario);

          var boton1 = $(document.createElement('button'))
            .addClass('btn').addClass('btn-info').addClass('btn-sm').addClass('mr-1').addClass('envio-mensaje')
            .attr('type', 'submit')
            .html('¡Adelante!')
            .prependTo(divBotones);

          var boton2 = $(document.createElement('button'))
            .addClass('btn').addClass('btn-info').addClass('btn-sm').addClass('borrado-modal')
            .attr('type', 'reset')
            .text('Algo no me convence...')
            .insertAfter(boton1);
        } else { //Si no tiene contenido -es null- esto otro

          $('.cuerpo-usuario').text('');

          var divPadre = $(document.createElement('div')) //1. Div que contiene todo
            .addClass('row')
            .prependTo('.cuerpo-usuario');

          var divFoto = $(document.createElement('div')) //1.1. Div columna que contiene la foto
            .addClass('col-4').addClass('d-flex').addClass('align-items-center')
            .prependTo(divPadre);

          var foto = $(document.createElement('img'))
            .addClass('pl-5')
            .css("border-radius", "10px")
            .attr('src', 'http://localhost/recopilatorios/php/web/mvc/recursos/imagenes/varias/interrogante.jpg').attr('width', '192').attr('height', '144')
            .prependTo(divFoto);

          var divResto = $(document.createElement('div')) //1.2. Div columna que contiene el resto de elementos
            .addClass('col-8')
            .appendTo(divPadre);

          var divTexto = $(document.createElement('div')) //1.2.1. Div que contiene el mensaje de avertencia
            .addClass('letra-perfil').addClass('pb-3')
            .prependTo(divResto);

          var nombre = $(document.createElement('span'))
            .css('color', 'mediumvioletred')
            .text(nombreUsuario)
            .prependTo(divTexto);

          var mensaje = $(document.createElement('span'))
            .text(' aún no ha completado su perfil...')
            .insertAfter(nombre);

          var divFormulario = $(document.createElement('div')) //1.2.2. Div con la caja de texto y los botones
            .appendTo(divResto);

          var cajaTexto = $(document.createElement('textarea'))
            .addClass('form-control').addClass('caja-modal')
            .attr('placeholder', `¿Quieres enviarle un mensaje privado a ${nombreUsuario}?`).attr('maxlength', '200').attr('rows', '2')
            .prependTo(divFormulario);

          var divBotones = $(document.createElement('div')) //1.2.2.2. Div que contiene los botones
            .addClass('d-flex').addClass('justify-content-center').addClass('pt-1')
            .appendTo(divFormulario);

          var boton1 = $(document.createElement('button'))
            .addClass('btn').addClass('btn-info').addClass('btn-sm').addClass('mt-2').addClass('mr-1').addClass('envio-mensaje')
            .attr('type', 'submit')
            .html('¡Adelante!')
            .prependTo(divBotones);

          var boton2 = $(document.createElement('button'))
            .addClass('btn').addClass('btn-info').addClass('btn-sm').addClass('mt-2').addClass('borrado-modal')
            .attr("type", "reset")
            .text('Algo no me convence...')
            .insertAfter(boton1);
        }
      },
      error: function() { //De nuevo, nunca hay error, siempre parece encontrar el archivo

        swal("Vaya...", "Parece que ha ocurrido un error", "error", {
          button: false
        });
      }
    });
  });

  $('#modal-usuarios').on('click', '.envio-mensaje', function() { //Delegación de eventos para el botón de envío

    var texto = $('.caja-modal').val(); //Captura el texto de la caja del modal
    var idEmisor = $('#id-usuario').text(); //El id del usuario conectado
    var idReceptor = idUsuario; //El id del usuario al que se envía el mensaje

    if (texto.length < 1) { //Da un aviso en caso de que se intente enviar un mensaje vacío

      swal("Vaya...", "Parece que te has olvidado de lo que ibas a escribir... ;P", "warning", {
        button: false
      });

      return false;
    } else {
      $.ajax( //Hace una petición AJaX para insertar el mensaje en la BD
        {
          type: 'POST',
          url: '../ajax_enviar_mensaje.php',
          data: {
            id_emisor: idEmisor,
            id_receptor: idReceptor,
            texto: texto
          },
          success: function(respuesta) {
            if (respuesta == 1) {
              $('.caja-modal').val(''); //Borra la caja de texto para evitar comportamientos maliciosos por parte del usuario

              swal('¡Genial!', `${nombreUsuario} ha recibido el mensaje`, 'success', {
                button: false
              });
            } else swal('Vaya...', `Algo ha fallado; intenta mensajear a ${nombreUsuario} más tarde...`, "error", {
              button: false
            });
          },
          error: function() //No funciona
          {
            swal("Vaya...", "Parece que ha ocurrido un error", "error", {
              button: false
            });
          }
        })
    }
  });

  $('#modal-usuarios').on('click', '.borrado-modal', function( /*e*/ ) { //Delegación de eventos para que el botón de borrado creado dinámicamente funcione

    //e.preventDefault(); //Al ser creado dinámicamente, el botón no actúa por defecto

    var cajaTexto = $('.caja-modal'); //Captura la caja de texto

    if (cajaTexto.val().length < 1) {
      swal("Vaya...", "Parece que no hay nada que borrar... ;P", "warning", {
        button: false
      });

      return false;
    } else {
      swal //Modal para confirmar el borrado
        ({
          title: '¿Quieres borrar tu comentario?',
          text: 'Si estás seguro, adelante',
          icon: 'warning',
          dangerMode: true, //Resalta el botón para conservar la información
          closeOnClickOutside: false, //No permite cerrar el modal haciendo clic fuera de él
          buttons: {
            cancel: {
              text: 'Realmente no',
              value: null, //Parámetro que determina si se produce o no el borrado
              visible: true,
              className: 'btn btn-outline-secondary',
              closeModal: true,
            },
            confirm: {
              text: 'Lo estoy',
              value: true, //Parámetro que determina si se produce o no el borrado
              visible: true,
              className: 'btn btn-danger',
              closeModal: true,
            }
          }
        }).then(function(value) {
          if (value) cajaTexto.val('');
        }) //Si value = true se borra la caja de texto
    }
  });
});
1
  • 1
    Tuve que convertir nombreUsuario e idUsuario en variables globales, pero parece que todo funciona como era de esperar, ¡gracias! el 25 dic. 2020 a las 15:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.