[SOLUCIONADO] .click no funciona con tabla generada Dinámicamente

art_rockerd · #1 (**permalink**) 05/02/2013, 13:38

Hola amigos buen dia, les escribo por que estoy atorada con algo, tengo dos campos de busqueda, lo que hago es cuando encuentra resultado (1 o muchos) los pinta en un div que esta "oculto", utilizo jquery (.ajax) y php, para buscar en bdd los resultados y enviarlos de vuelta a jquery, el detalle que tengo es que, a esos resultados que obtengo, los formateo para que se muestren en forma de tabla, y lo que quiero, pero no lo logro, es que cuando le den clic a cada elmento de la lista que encontro me envie un alert. Pero simplemente no funciona, copie todo ese codigo HTML que me genera el php y lo coloco solito en otra pagina y me funciona, el detalle es que cuando hago que se genere diamicamente dicha tabla, no quiere funcionar el js. Les comparto mi codigo.

Código Javascript:

Ver original///////////////////////////FUNCION PARA VALIDAR Y BUSCAR LAS VENTAS HECHAS////////////////////////////
$("#consultar").click(function()
    {
    if($("#telefono").val().length < 1&$("#folio").val().length < 1){
        alert ("No pueden estar vacios los dos campos, introduzca un criterio para la busqueda");
        }else {
            $.ajax({
            type: "POST",
            url:'consultasGerente.php',
            data:{
                bandera:"yes",
                linea:$('#telefono').val(),
                folio:$('#folio').val()
                },
            success: function(data){
                $("#msgbox4").fadeTo(200,0.1,function() 
                    { 
                    $(this).html('Buscando...').fadeTo(900,1,
                        function(){
                            var folio = data;
                            $("#listado").fadeTo(200,0.1,function() //start fading the messagebox
                                                        { //add message and change the class of the box and start fading
                                                          $("#listado").html(data).fadeTo(900,1);;
                                                        });
                            //$("#listado").html(folio);
                            $(this).html('Busqueda Terminada...').fadeTo(900,1);
                            
                        }); 
                    });//END msjbox4
                
                
            },
            error:function(){
                alert('error');
            }        
         });//end ajax
            
        }
        
    });//end consultar
///////////////////////////FUNCION PARA MOSTRAR LOS DATOS DE LAS VENTAS////////////////////////////
/* ESTA ES LA QUE NO ME FUNCIONA*/
$(".folios").click(function()
    {
        var folioSelected = $(this).html();
        alert (folioSelected);
        
       });//end consultar

Aqui el PHP que busca en BDD y envia los resulados ya formateados en HTML(tablas)

Código PHP:

Ver originalfunction consultar_datos($linea,$folio){
                //echo $linea." y ".$folio;
                include "conexionMysqli.php";
                $linea = $mysqli->real_escape_string($linea);
                $folio = $mysqli->real_escape_string($folio);
                $query="SELECT folio_intel as folio, date(fecha_venta) as fecha_venta
                        FROM ventas
                        WHERE telefono='$linea' OR folio_intel='$folio'";
        $result = $mysqli->query($query) or die($mysqli->error.__LINE__);
                if($result->num_rows > 0) {
                   $tabla = "<table border='1'><tr><th  class='B_Titulos'>Folio</th><th  class='B_Titulos'>Fecha</th></tr>";
                   while ($row = $result->fetch_assoc()){ //para varios resultados
                //OBTENIENDO Y ORDENANDO LOS DATOS...
                                $folio=$row['folio'];
                                $fVenta=$row['fecha_venta'];
                                $tabla .= "<tr><td ><div class='folios'>".$folio."</div></td>";
                                $tabla .= '<td>'.$fVenta.'</td></tr>';
                                }
                                    $tabla .= '</table>';
                                    echo $tabla;
                }else {
            echo 'No hay resultados con esos datos';    
        }
            }//end consultar_datos

y este es mi HTML

Código HTML:

Ver original<table width="300" border="1" cellpadding="3">
           <tr>
             <th colspan="2" align="center" class="B_Titulos">Buscar Linea Telmex</th>
            </tr>
             <tr>
             <td align="center"><label for="telefono">No. Telefonico:</label></td>
             <td align="center"><input onkeypress="return validarNum(event)" id="telefono" name="telefono" type="text" size="25" maxlength="10" placeholder="Maximo 10 digitos" /></td>
             </tr>
             <tr>
               <td align="center"><label for="telefono">No. de Folio:</label></td>
               <td align="center"><input onkeypress="return validarNum(event)" id="folio" name="folio" type="text" size="25" maxlength="20" placeholder="Maximo 20 digitos" /></td>
            </tr>
             <tr>
             <td colspan="2"><label for="consultar"></label>
             <div id="consultar"></div>
             </td>
             </tr>
             <tr>
               <td colspan="2"><span id="msgbox4" class="mensajes" style="display:none"></span></td>
             </tr>
          </table><!-- TERMINA TABLE-->
        </form></td>
        </tr>
      <tr>
        <td height="35" colspan="2">&nbsp;</td>
        </tr>
      <tr>
        <td><div id="listado" style="display:none"><!-- AQUI SE MOSTRARAN LOS RESULTADOS--></div></td>
         </tr>
    </table>

Existe algun por que de que no quiera funcionar el $(".folios").click(function()

Como les comente, si lo hago estatico si me funciona, aqui esta el ejemplo de los resultados que me arroja el PHP pero aqui lo hago "estatico":

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>probar clase</title>
<script src="js/jquery-1.8.2.min.js" type="text/javascript" ></script>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
    $(".folios").click(function()
    {
        var folioSelected = $(this).html();
        alert (folioSelected);
        
       });
 });
</script>
</head>
<body>
<table border="1">
    <tbody><tr><th class="B_Titulos">Folio</th>
        <th class="B_Titulos">Fecha</th></tr>
            <tr><td><div class="folios">13020113044900020420</div></td>
            <td>2013-02-01</td></tr>
        <tr><td><div class="folios">13020113050300020420</div></td>
            <td>2013-02-01</td></tr>
        <tr><td><div class="folios">13020113051800020420</div></td>
            <td>2013-02-01</td></tr>
    </tbody>
</table>
</body>
</html>

Muchas gracias por su ayuda. Saludos!

Rosencrantz · #2 (**permalink**) 05/02/2013, 14:34

Esta respuesta la di en otro thread

Cita:

Iniciado por Rosencrantz

Usa livequery cuando los elementos generados dinamicamente no responden a ningun evento en particular (click, change, hover...), usa on cuando no sea el caso.
Los elementos dinamicos en js aparecen "muertos" a diferencia del CSS en el cual generas y los estilos se aplican normalmente, jquery dispone de algunos medio para "revivir" esos elementos como on.(recomendado 1.8>), delegate., live. (deprecated) o el plugin livequery.

http://docs.jquery.com/Plugins/livequery

Ejemplo (cargar livequery)

Código PHP:

  $('.birthDate').livequery(function(){

  $(this).datepicker();

  return false;

});

Para tu caso usa algo como:

Código PHP:

  $('#listado').on('click','div.folios',function(){

 alert('Bazzinga');

 // do more

});

Sobre el on.
http://api.jquery.com/on/

Saludos.

art_rockerd · #3 (**permalink**) 05/02/2013, 15:23

Cita:

Iniciado por Rosencrantz

Esta respuesta la di en otro thread

Para tu caso usa algo como:

Código PHP:

  $('#listado').on('click','div.folios',function(){

 alert('Bazzinga');

 // do more

});

Sobre el on.
http://api.jquery.com/on/

Saludos.

Hola amigo, lo intente pero no me funciona, me arroja el Firebug este error:

Error: TypeError: $(...).on is not a function

Rosencrantz · #4 (**permalink**) 05/02/2013, 15:38

que version del jquery tienes? creo que el on se implemento desde la 1.8, asi que podrias usar el delegate que funciona exactamente igual

Código PHP:

  $('#listado').delegate('click','div.folios',function(){ 

 alert('Bazzinga'); 

 // do more 

});

art_rockerd · #5 (**permalink**) 05/02/2013, 15:38

Cita:

Iniciado por Rosencrantz

que version del jquery tienes? creo que el on se implemento desde la 1.8, asi que podrias usar el delegate que funciona exactamente igual

Código PHP:

  $('#listado').delegate('click','div.folios',function(){ 
 alert('Bazzinga'); 
 // do more 
});

Bueno ese es el detalle, que estoy trabjando con jquery 1.4.2.0....alguna alternativa sin que tenga que cambiar la version de jquery?

Ya intente el delegate, y no me envia ese error, pero simplemente no hace nada... no se como podria solucionarlo.

Rosencrantz · #6 (**permalink**) 05/02/2013, 15:49

Cita:

Iniciado por art_rockerd

Bueno ese es el detalle, que estoy trabjando con jquery 1.4.2.0....alguna alternativa sin que tenga que cambiar la version de jquery?

Ya intente el delegate, y no me envia ese error, pero simplemente no hace nada... no se como podria solucionarlo.

Creo que cometi un ligero error no es exactamente igual

Código PHP:

  $('#listado').delegate('div.folios', 'click', function(){ 

 alert('Bazzinga'); 

 // do more 

});

Aqui el ejemplo funcionando dale run y das click en los td's
http://jsfiddle.net/Xr7ut/

art_rockerd · #7 (**permalink**) 05/02/2013, 15:56

Cita:

Iniciado por Rosencrantz

Creo que cometi un ligero error no es exactamente igual

Código PHP:

  $('#listado').delegate('div.folios', 'click', function(){ 

 alert('Bazzinga'); 

 // do more 

});

Aqui el ejemplo funcionando dale run y das click en los td's
http://jsfiddle.net/Xr7ut/

Pefecto ya quedo funcionando ahora solo le hago las modificacones que necesito para leer el contenido de cada div que es el que utilizare para hacer otras consultas en mi base de datos ! Muchas gracias.

Me queda algo asi..

Código Javascript:

Ver original///////////////////////////FUNCION PARA MOSTRAR LOS DATOS DE LAS VENTAS////////////////////////////
$('#listado').delegate('div.folios', 'click', function(){ 
    var folioSelected = $(this).html();
    alert (folioSelected);
});

Rosencrantz · #8 (**permalink**) 05/02/2013, 15:59

Que bueno que funcionó, saludos.