0

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()
});
7
  • Intenta con $( document ).ready(function() {
    – alanfcm
    el 12 sep. 2022 a las 16:46
  • Hola, sí, ese fue mi primer intento pero tampoco funciona el evento. el 12 sep. 2022 a las 16:53
  • Prueba con <a class="editar" onclick="mifuncion()">
    – Yussef
    el 12 sep. 2022 a las 16:57
  • 1
    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
    – Alfabravo
    el 12 sep. 2022 a las 18:02
  • Hola, error mio al escribir la pregunta. Es console.log() el 12 sep. 2022 a las 18:45

1 respuesta 1

2

Ya encontre la solucion, esto me funciono.

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 class="id">{{$Usuario->id}}</td>
      <td class="Nombre">{{$Usuario->Nombre}}</td>
      <td class="Apellido">{{$Usuario->Apellido}}</td>
      <td><a id="editar">Ver</a></td>
    </tr>
    @endforeach
  </tbody>
</table>

Jquery para recoger datos de una casilla en fila.

$(document).on('click','#editar',function(){
var nombre, apellido,dni;
var fila = $(this).parents("tr");
nombre =fila.find('.Nombre').html();
Apellido=fila.find('.Apellido').html();
dni =fila.find('.id').html();
});
1
  • No olvides explicar qué tiene de diferente tu código (como edición a tu respuesta, no como comentario). Lee Cómo responder. Luego, cuando transcurra el tiempo mínimo, acepta tu respuesta.
    – padaleiana
    el 13 sep. 2022 a las 15:48

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.