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....
event.stopPropagation()
;