Ver Mensaje Individual
  #3 (permalink)  
Antiguo 28/09/2011, 11:36
petit_fucker
 
Fecha de Ingreso: julio-2011
Mensajes: 6
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Problema con Ajax + JQuery + append()

Ok, voy a poner un código simple y comprensible:

Este sería un index.php básico:

Código PHP:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <script src="jquery-1.6.1.js" type="text/javascript"></script>
  6.         <script src="main.js" type="text/javascript"></script>
  7.         <title></title>
  8.     </head>
  9.     <body>
  10.         <p>ESTO ES LA TABLA DE PRUEBAS</p>
  11.         <table border="1" id="pruebas">
  12.         <?php
  13.             echo "<tr>
  14.                    <td>Campo1</td>
  15.                    <td>Campo2</td>
  16.                    <td>Campo3</td>
  17.                    <td>Campo4</td>
  18.                  </tr>
  19.                  <tr class='p'>
  20.                    <td>Uno</td>
  21.                    <td>XXXX</td>
  22.                    <td>XXXX</td>
  23.                    <td id='0'>0</td>
  24.                  </tr>
  25.                  <tr class='p'>
  26.                    <td>Dos</td>
  27.                    <td>XXXX</td>
  28.                    <td>XXXX</td>
  29.                    <td id='1'>0</td>
  30.                  </tr>
  31.                  <tr class='p'>
  32.                    <td>XXXX</td>
  33.                    <td>XXXX</td>
  34.                    <td>XXXX</td>
  35.                    <td id='2'>0</td>
  36.                  </tr>";
  37.         ?>
  38.         </table>
  39.     </body>
  40. </html>

Luego el Javascript de carga:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.   setInterval("sumarUno()", 1000);
  3.   setInterval("agregarFila()", 5000);
  4. });
  5.  
  6. function sumarUno(){
  7.     var c = $('tr.p');
  8.  
  9.     for (var i= 0; i < c.length; i++){
  10.         var id = "#" + i;
  11.         var campo = $(id);
  12.  
  13.         var valor = parseInt(campo.text()) + 1;
  14.         campo.text(valor);
  15.     }
  16. }
  17.  
  18. function agregarFila(){
  19.     $.ajax({
  20.        url: 'pruebas.php',
  21.  
  22.        success:function(html){
  23.            $('#pruebas').append(html);
  24.        },
  25.  
  26.        error:function(err){
  27.            alert("ERROR:" + err);
  28.        }
  29.     });
  30. }

Como ven, cada un segundo le sumo uno al Campo4, y cada 5 segundos pido nuevas filas y las agrego a la tabla html.

El problema es que las nuevas filas insertadas en la tabla no son reconocidas por JQuery la siguiente vez que recorra las mismas, en la función 'sumarUno()'.