2

Cuando selecciono una opción de una lista concatenada localizada en la función "processMessage(message)"

$("#visitors").append('<h5 class="unread" onclick="visitorSelected(this);" data-id=' + visitors[i].idSession + '>' + visitors[i].visitorOnline + '</h5>');

se produce un evento haciendo una llamada a la función "visitorSelected(event)", donde se captura sin problemas el data-id de la opción seleccionada. Posteriormente se pretende borrar el class "unread", con la siguente línea de código:

//does not delete the class 'unread'
$('[data-id="' + visitorSelected + '"]').removeClass('unread');

El resultado es que no borra dicha clase. Sin embargo, la anterior línea de código se ha probado en la consola del navegador, funciona correctamente. Estoy buscando el por qué del error y no doy con ello.

*Nota: No se ha puesto el código entero, sólo un fragmento.

Gracias de antemano.

Saludos.

<div>
    <div id="visitors"></div>
    <br />
    <textarea id="chatRoomField" rows="10" cols="30" readonly></textarea> <br/>
    <input id="sendField" value="" type="text">
    <button id="sendButton" onclick="send_message();">Enviar</button>
</div>

<script>
    function visitorSelected(event){
        var visitorSelected = $(event).data('id');

        //does not delete the class 'unread'
        $('[data-id="' + visitorSelected + '"]').removeClass('unread');
        
        localStorage.setItem('visitorSelected', visitorSelected);
        websocket.send(json_messages(visitorSelected, '${email}', '${read}'));
        document.getElementById("chatRoomField").innerHTML = "";
    }

    function processMessage(message){

        if(json_message.hasOwnProperty('visitors')){
            var visitors = json_message.visitors;
        
            if(visitors.length > 0){
                $("#visitors h5").remove();
                
                for (var i = 0; i < visitors.length; i++) {
                    $("#visitors").append(
                        '<h5 class="unread" onclick="visitorSelected(this);" data-id=' + visitors[i].idSession + '>' + visitors[i].visitorOnline + '</h5>');
                }
            }
        }
    }
</script>
2
  • 1
    Por favor edita la pregunta para poner el código como texto, en imagen no podemos copiarlo para probar.
    – Triby
    el 6 may. 2021 a las 14:35
  • He editado el comentario. Le adelanto que la línea de código del append no se va a ver si no hay una lista, por eso comenté que pasaría sólo un fragmento de código. el 6 may. 2021 a las 14:40

2 respuestas 2

3

Parece ser que la función visitorSelected no puede aplicarle el cambio al elemento ya que este se crea de manera dinámica, por lo que te recomiendo que generes una función con jquery

$(document).on( 'click', '.unread', function(){
       $(this).removeClass('unread');
    } );

Esta función buscará en el DOM el elemento, lo que funciona para elementos dinámicos. Ten en cuenta que esto eliminará la clase, lo que inhabilitará que nuevamente se llame a la función visitorSelected, puedes agregar otra clase, por ejemplo visitors-event.

'<h5 class="unread visitors-event" data-id=' + visitors[i].idSession + '>' + visitors[i].visitorOnline + '</h5>');

$(document).on( 'click', '.visitors-event', function(){
    $(this).removeClass('unread');
} );
1
  • Se agradece la solución que has aportado. Me ha servido como idea para solucionar el problema. Gracias Javier. el 10 may. 2021 a las 13:57
2

Agregando elementos tu código funcionaba correctamente, sin embargo, hay varias cosas por mejorar:

  • No incluyas eventos en línea (dentro de etiquetas), es más recomendable asignarlos desde Javascript, no importa si no existen todavía, jQuery te permite delegar eventos
  • En la función vas a recibir el evento y con e.target puedes obtener el elemento que lo disparó
  • Al procesar mensajes, una sola condición es suficiente, verificar que exista la propiedad y que tenga al menos un elemento
  • Recorre el arreglo con forEach(), es más sencillo que un ciclo for
  • En vez de concatenar el nuevo HTML, es preferible usar plantillas de texto para que el código sea más legible

    function visitorSelected(e) {
        // Obtener elemento y su ID desde evento con e.target
        let visitorSelected = $(e.target).data('id');

        // Ya se tiene el elemento solo hay que acceder correctamente
        $(e.target).removeClass('unread');
        
        localStorage.setItem('visitorSelected', visitorSelected);
        websocket.send(json_messages(visitorSelected, '${email}', '${read}'));
        document.getElementById("chatRoomField").innerHTML = "";
    }

    function processMessage(message){
        json_message = message; // <-- Agregué esta línea para evitar errores
        if(json_message.hasOwnProperty('visitors') && json_message.visitors.length > 0) {
            // Eliminar contenido previo
            $("#visitors h5").remove();
            // Recorrer arreglo con forEach
            json_message.visitors.forEach(visitor => {
                // Usa plantillas de texto para crear el contenido
                $('#visitors').append(`
                    <h5 class="unread" data-id="${visitor.idSession}">${visitor.visitorOnline}</h5>
                `);
            });
        }
    }
// Escuchar eventos en lugar de ponerlos en línea
$('#visitors').on('click', 'h5.unread', visitorSelected);

// Para probar
let jsonMessage = {
    visitors: [
        { idSession: 1, visitorOnline: 'Juan' },
        { idSession: 2, visitorOnline: 'José' },
        { idSession: 3, visitorOnline: 'Paco' },
    ]
};
processMessage(jsonMessage);
.unread { color: #a00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div id="visitors"></div>
    <br />
    <textarea id="chatRoomField" rows="10" cols="30" readonly></textarea> <br/>
    <input id="sendField" value="" type="text">
    <button id="sendButton" onclick="send_message();">Enviar</button>
</div>

1
  • He seguido la solución que has aportado y he podido solucionar el problema. Asimismo se agradece que hayas comentado el código además de las buenas prácticas con jQuery. Gracias Triby. el 10 may. 2021 a las 13:59

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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