Tengo un problema a la hora de carga una tabla dinámicamente, el evento click no se adjunta al botón.
Mi código html:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">Dni</th>
</tr>
</thead>
<tbody>
@foreach ($Usuarios as $Usuario)<tr>
<td>{{$Usuario->id}}</td>
<td>{{$Usuario->Nombre}}</td>
<td>{{$Usuario->Apellido}}</td>
<td><a class="editar">Ver</a></td>
</tr>
@endforeach
</tbody>
</table>
Mi código de script usando jquery:
$('.editar').click(function (){
Console.log("Funciona");
});
He intentado con:
$(document).on('click','.editar',function (){
Console.log("Funciona");
});
Tambien he intentado agregar un id al tbody y probar
$('#tabla').on('click','.editar',function (){
Console.log("Funciona");
});
Pero sigue sin funcionar, el evento no se dispara, lo datos se cargan con ayuda de blade en laravel. Entiendo que se debe a la carga dinámica de los botones pero llevo rato sin una solución, agradecería un consejo.
Edición:
Asignar id, no me permitiría de esta manera recoger los datos de la fila al dar click al boton ver.
$(document).on('click','.editar',function(){
var nombre, apellido,dni;
var fila = $(this).parents("tr");
nombre =fila.find('td:eq(1)').html();
Apellido=fila.find('td:eq(2)').html()
dni =fila.find('td:eq(3)').html()
});
$( document ).ready(function() {
Console
no funciona, debe ir sin mayúscula inicial,console.log
. Para futuras preguntas, por favor revisa la consola donde intentas imprimir y reporta cualquier error que te salga. Procura además darle id único a los elementos con los que trabajas... sobre todo si tienes una clase en N elementos dinámicos