Asociar evento a filas cargadas dinamicamente

[laureano59]

Cordial Saludo a todos los colaboradores de este Foro.

Espero me pueda hacer entender en este caso, voy a explicar un poco lo que tengo, y a partir de ahí lo que necesito hacer funcionar:
Tengo una tabla muy bien elaborada, y con algunas funciones de jquery se manejan la paginación, las búsquedas, etc.
La tabla funciona de maravilla si la cargo manualmente desde el html
Ahora lo que necesito es cargar en el tbody las filas de la tabla de forma dinámica:
Las cargo desde un JSON que viene de PHP, hasta ahí todo funciona y no tengo problema.
El problema surge en la paginación y en las búsquedas, pues al parecer el jquery no se da cuenta de que se cargaron nuevas filas y asume como si no tuviera ninguna, aunque se muestran en pantalla y todo parece normal, al ver la paginación o al intentar hacer una búsqueda la tabla se pone en blanco sin ninguna fila.

Voy a poner la parte del html y la parte dónde cargo las filas dinámicamente para ver si es que debo asociar algún evento que le informe a jquery de las nuevas filas.
HTML de la tabla:

Código HTML:

<tableid="dynamic-table"class="tabletable-stripedtable-borderedtable-hover">
<thead>
<tr>
 <thclass="center">
 <labelclass="pos-rel">
 <inputtype="checkbox"class="ace"/>
 <spanclass="lbl"></span>
 </label>
 </th>
 <th>Nombre</th>
 <th>
 <iclass="ace-iconfafa-calendar-obigger-110hidden-480"></i>
 Fecha
 </th>
 <th>
 <iclass="ace-iconfafa-clock-obigger-110hidden-480"></i>
 Hora
 </th>
 <th>Ministerio</th>
 <th>Ciudad</th>
 <th>Sede</th>
</tr>
</thead>
<tbodyid="display_tabla">
</tbody>
</table>
 

Y este es el jquery: Es una función que llamo al dar click en un botón que envía datos de un formulario:

TENGAN EN CUENTA que lo que traigo de php funciona y los datos los carga sin porblema para que no se pongan a mirar cosas del ajax y del json...

Código Javascript:

document.getElementById('cargargrillas').onclick = function(){
    var sede,ministerios,fecha,reporte,datos;
    sede = document.getElementById('sede').value;
    ministerios = $("#form-field-select-3").val();
    fecha= document.getElementById('id-date-range-picker-1').value;
    reporte= document.getElementById('tiporeporte').value;
    datos = {"sede": sede,"ministerios": ministerios,"fecha": fecha,"reporte": reporte};
__ajax("?view=grillasasistencia", datos)
.done( function( info ){
var validar = JSON.parse( info );
if(validar != ''){
document.getElementById('mostrar_tabla').style.display = 'block';
document.getElementById('tipo_reporte').innerHTML = 'Reporte de Asistencia';
var html ='';
for(item in validar){
html +=
'<tr>' +
'<td class="center">' +
'<label class="pos-rel">' +
'<input type="checkbox" class="ace" />' +
'<span class="lbl"></span>' +
'</label>' +
'</td>' +
'<td>'+ validar[item].nombre_mie + ' ' + validar[item].apellido_mie +'</td>' +
'<td>'+ validar[item].fecha_asi +'</td>' +
'<td>'+ validar[item].hora_entrada_asi +'</td>' +
'<td>'+ validar[item].ministerio +'</td>' +
'<td>'+ validar[item].ciudad +'</td>' +
'<td>'+ validar[item].sede +'</td>' +
'</tr>';
}
document.getElementById('display_tabla').innerHTML = html;
                }
});
 

[ArturoGallegos]

https://api.jquery.com/on/

[laureano59]

Gracias por responder, he estado mirando el evento on pero no se que cambios hacerle a lo que tengo pues intenté cambiar

Código Javascript:

document.getElementById('cargargrillas').onclick = function(){
 
por esto :
 
$( "#cargargrillas " ).on ( "click", function() {
 

Pero a la verdad no se como hacerlo para que funcione...

[ArturoGallegos]

esta mal tu selector debes apuntar al elemento que quieres que tenga dicho efecto, si son filas son tr si son celdas seguramente th o td

Código Javascript:

$('body').on('click', 'td', function(){
...
})
 

la documentación es clara, léela tantas veces necesites,
1.- el selector inicial debe ser parte del DOM desde la renderización ya que es la referencia para la acción, use body de ejemplo porque va de paquete en cualquier documento, pero no lo uses en tu proyecto final, esta función recorre todo el documento en busca del selector indicado y el sub elemento en cuestión, es decir sera pesado en cuestión de rendimiento.

2.- el segundo parámetro de ON es el elemento que realmente tendrá el efecto onclick, mientras mas cercano y claro este en relación al elemento de referencia mas optimo sera el proceso.

es código expuesto es de ejemplo se mas especifico al momento de aplicar en tu proyecto