0

Tengo el siguiente código de javascript, ejecutado en un entorno node.js.

    let alturaScrollY = $(window).height()
        - $('#linksGransIPetits').height()
        - $('#divBotons').height()
        - $('#mesos').height()
        - 60 + 'px';

    let dataID = null;
    let taula = null;

    loadTable(dades);    

    function loadTable(dades) {

        taula = $('#table').DataTable({
            select: 'single',
            "destroy": true,
            "scrollY": alturaScrollY,
            "scrollCollapse": true,
            "paging": false,
            "searching": false,
            "bInfo": false,
            "data": dades,
            //"data": <%- dadesDuesNoviembre %>,
            "columns": [
                {"data": 'id'},
                {"data": 'colectivo'},
                {"data": 'unidad'},
                {"data": 'turno'},
                {"data": 'dia'},
                {"data": 'licencia'},
                {"data": 'cubre'},
                {"data": 'notas'}
            ],
            columnDefs: [
                {targets: 0, visible: false},
                {targets: 1, visible: false}
            ]
        });

        $('#table tbody').on( 'click', 'tr', function () {

            console.log('Inside click listener')

            if ($(this).hasClass('selected')) {

                console.log('had Class selected')

                $(this).removeClass('selected');
                idSolicitud = null
                $('#info').text('')
            } else {

                console.log('NOT had Class selected')

                taula.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
                idSolicitud = $('#table').DataTable().row(this).data().id;
                console.log(idSolicitud)
                $('#info').text(idSolicitud)
            }
        });
    }

Hasta aquí, todo correcto. El código se ejecuta como espero. Pero al sustituir "loadTable(dades)" por un bloque switch, quedando:

    let alturaScrollY = $(window).height()
        - $('#linksGransIPetits').height()
        - $('#divBotons').height()
        - $('#mesos').height()
        - 60 + 'px';

    let idSolicitud = null;
    let taula = null;

    switch (condition) {
        case 1:
            $('#tab_1').addClass('active');
            loadTable(<%- dades_1 %>);
            break;
        case 2:
            $('#tab_2').addClass('active');
            loadTable(<%- dades_2 %>);
            break;
        case 3:
            $('#tab_3').addClass('active');
            loadTable(<%- dades_3 %>);
            break;
        default:
            break
    }    

    function loadTable(dades) {

        taula = $('#table').DataTable({
            select: 'single',
            "destroy": true,
            "scrollY": alturaScrollY,
            "scrollCollapse": true,
            "paging": false,
            "searching": false,
            "bInfo": false,
            "data": dades,
            //"data": <%- dadesDuesNoviembre %>,
            "columns": [
                {"data": 'data1'},
                {"data": 'data2'},
                {"data": 'data3'},
                {"data": 'data4'}
            ],
            columnDefs: [
                {targets: 0, visible: false}
            ]
        });

        $('#table tbody').on( 'click', 'tr', function () {

            console.log('Inside click listener')

            if ($(this).hasClass('selected')) {

                console.log('had Class selected')

                $(this).removeClass('selected');
                idSolicitud = null
                $('#info').text('')
            } else {

                console.log('NOT had Class selected')

                taula.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
                dataID= $('#table').DataTable().row(this).data().data1;
                console.log(dataID)
                $('#info').text(idSoldataIDicitud)
            }
        });
    }

La salida que obtengo en la consola no tiene lógica. Si selecciono, por ejemplo, una línea que no esté seleccionada, obtengo:

Inside click listener NOT had Class selected 2 Inside click listener had Class selected

¿Por qué se ejecuta 2 veces el código del bloque $('#table tbody').on( 'click'......?

Y si selecciono una fila que esté seleccionada, la salida es:

Inside click listener had Class selected Inside click listener NOT had Class selected

Llevo horas y horas dándole vueltas y no consigo vislumbrar cuál puede ser el error....

1
  • 1
    Prueba poniendo al inicio del párrafo onclick. Lo siguiente: event.stopPropagation(); Commented el 25 dic. 2022 a las 19:18

1 respuesta 1

0

$('#table tbody').on( 'click', 'tr', function () { se ejecuta 2 veces (o más) porque se define más de una vez. Cada vez que se ejecuta loadTable, se agrega un nuevo "event listener".

La solución sería mover $('#table tbody').on( 'click', 'tr', function () { fuera de la función loadTable.

1
  • Gracias. Efectivamente es como dices. Yo estaba convencido de que al dibujar de nuevo la tabla, el listener anterior se eliminaba, quedando solo el nuevo. ¡GRACIAS!
    – David V.
    Commented el 26 dic. 2022 a las 9:48

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.