1

Hola tengo el siguiente problema. He buscado mucho, aqui y en google y no logro dar con el problema.

Tengo una tabla que se actualiza dinamicamente: PHP + Mysql + Jquery

La tabla que se carga inicialmente queda asi:

<table class="table table-striped table-bordered table-hover">
<tbody>
    <tr>
        <td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 02-16 </td>
        <td>15-087B-16-1</td>
        <td>950,00</td>
        <td style="text-align: right">118385,50</td>
        <td style="text-align: right">118385,57</td>
        <td style="text-align: center"><a href="#viewC" data-value="4" data-toggle="modal" class="link-view-c"><i class="fa fa-eye link-view-c-child" data-value="4" aria-hidden="true"></i></a></td>
    </tr>
    <tr>
        <td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 17-17</td>
        <td>15-087B-17-2</td>
        <td>142,00</td>
        <td style="text-align: right">11112,12</td>
        <td style="text-align: right">11112,12</td>
        <td style="text-align: center"><a href="#viewC" data-value="14" data-toggle="modal" class="link-view-c"><i class="fa fa-eye link-view-c-child" data-value="14" aria-hidden="true"></i></a></td>
    </tr>
</tbody>

Tengo lo siguiente para capturar el ID que defino en el campo data-value en el link en la ultima columna.

<script>
$(document).ready(function () {
    $(".link-view-c").on('click', '.link-view-c-child', function () {
        v = $(this).data('value');
        alert(v);
    });        
});

El problema es que cuando se inicializa la tabla, carga el primer bloque, obtengo el ID, pero cuando paso al siguiente bloque no hace nada. Y uso

on('evento', 'destino', function())

se supone que la class link-view-c-child a partir del segundo bloque dispare el evento.

Alguna ayuda que me destrabe esto por favor.

Sldos

3
  • Probaste cambiando el parent? Por ejemplo, cambiar el $('.link-view-c') por $('.table'). Y qué es lo que se cambia dinámicamente del DOM?
    – Kleith
    Commented el 3 may. 2018 a las 15:07
  • Lo que se cambia dinamicamente es la propia tabla. En la pagina hay un navigation que lanza la carga de otro bloque de filas de la tabla. Cada fila representa un record del que necesito el ID para poder mostrar la informacion en un "modal"
    – a.xcibo
    Commented el 3 may. 2018 a las 15:12
  • Probe usando $('.table'). No funciona. Habia entendido y creo que comprobado en todo lo que he leido que necesitaba el parent directo del element del DOM donde se lanza el evento.
    – a.xcibo
    Commented el 3 may. 2018 a las 15:21

2 respuestas 2

5

Para realizar eventos con jquery sobre elementos creados dinamicamente utiliza lo siguiente;

$(document).on( 'evento click,change,blur,etc', '#idelemento .clase', function(){
        //Todo el código aqui
    } );

Con esto harás referencia al DOM por lo que buscará cualquier elemento con la clase o el ID al ejecutarse el evento que desees.

2
  • 1
    Gracias. No usaba $(document).on() porque habia entendido que debia usar el element que se definia como padre directo del element del que queria capturar el event.
    – a.xcibo
    Commented el 3 may. 2018 a las 15:23
  • Bien, bien..! me funcionó , antes de esto ya había probado con delegate y nada Commented el 22 jun. 2022 a las 22:08
2

1) Como dice Yo Albert, en este caso es mejor pedirle al DOM buscar los elementos, que fijarlo en un selector definido.

2) Si no te mueve mucho código, trata de poner los eventos y las clases sobre el TD no sobre los que haya adentro.

3) Si dentro del TD hay elementos que necesitas como una <a> puedes utilizar $(this).find('a').text() por ejemplo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(function(){
  
   $(document).on('click', '.link-view-c', function () {
        v = $(this).data('value');
        alert(v);
    }); 
})
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered table-hover">
<tbody>
<thead>
  <tr>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>

  </tr>
</thead>
    <tr>
        <td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 02-16 </td>
        <td>15-087B-16-1</td>
        <td>950,00</td>
        <td style="text-align: right">118385,50</td>
        <td style="text-align: right">118385,57</td>
        <td class="link-view-c" aria-hidden="true" data-value="4" data-toggle="modal" style="text-align: center"><a href="#viewC" ><i class="fa fa-eye link-view-c-child" ></i></a></td>
    </tr>
    <tr>
        <td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 17-17</td>
        <td>15-087B-17-2</td>
        <td>142,00</td>
        <td style="text-align: right">11112,12</td>
        <td style="text-align: right">11112,12</td>
        <td style="text-align: center" data-value="14" class="link-view-c" aria-hidden="true" data-toggle="modal" ><a href="#viewC" ><i class="fa fa-eye link-view-c-child" data-value="14" ></i></a></td>
    </tr>
</tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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