Problema: ¿Cómo hago que una función funcione en las filas creadas después de la carga de la página inicial?
En la carga de la página, mi código obtiene datos de Mongo DB y crea filas de tablas para cada entrada con un bucle for (item of data) . Cuando se hace esto, se ejecuta un código que hace que todas las filas recién creadas se puedan hacer clic y expandir. Funciona bien. Este es el código:
$('tbody tr').not('.hidden-row').on('click', function(event){ $('tbody tr.opentr').not(this).removeClass('opentr') $(event.currentTarget).toggleClass('opentr') var hiddenRow = $(this).next(".hidden-row") var rowExists = $(hiddenRow).length if (rowExists) { $('tbody .hidden-row').not(hiddenRow).hide() $(hiddenRow).toggle() } else { var expRowContent = $(this).find('.hide').html() var newExpRow = '<tr class="hidden-row" style="display:none;"><td colspan="7">' + expRowContent + '</td></tr>' $(newExpRow).insertAfter(this) $('tbody .hidden-row').not(hiddenRow).hide() $(this).next('.hidden-row').toggle() } })Todo está bien. Ahora el usuario activa la adición de una nueva fila que se inserta al final de la tabla. Funciona bien.
Pero no se puede hacer clic en esta fila, porque el código anterior se vincula a los elementos que se crearon cuando se ejecutó.
Si simplemente vuelvo a ejecutar el código, ahora se puede hacer clic en mi fila agregada dinámicamente y se puede expandir. Genial, excepto por el hecho de que, por alguna razón, esto hace que no se pueda hacer clic en todas las filas ya creadas. Solo se puede hacer clic en la fila recién creada.
Estuve investigando en la consola, pero no puedo ver ningún cambio de código en las filas existentes que explicaría esto. ¿Por qué es eso? ¿Y esto debería ser abordado de una manera diferente?
Los comentarios han informado a la delegación del evento. Aquí hay un ejemplo:
// add the event listener to the entire table body $('table tbody').on('click', (evt)=> /* Check if the target is a <tr> or a descendant of <tr> if(evt.target.matches('tr') || evt.target.matches('tr *')) { // ... your old event listener code goes here } });