0

Cuando carga la pagina se muestra una tabla, a esta tabla al dar doble click sobre un registro se abre un modal con una grafica, hasta ahi funciona correcto pero cuando por medio de una lista desplegable que igual me manda atraer otros resultados mediante ajax y se muestra en la pagina.. al dar doble click sobre uno de los nuevos registros ya no me ejecuta el doble click para abrir el modal ¿Como podria hacer que el javaScript que abre el modal se abra con los nuevos registros cargados?

Soy nuevo en esto y realmente estoy atorado con esto. Gracias por quien se tome un momento para tratar de aclararme esto.

Este es el codigo de la tabla que carga enal principio en la pagina inicial.

Tabla:

 <tbody id="contenedora">                   
<?php
$conn = oci_connect("SYSTEM","Seguridad123","localhost/orcl");
$stid = oci_parse($conn, 'SELECT  IDCONTRATO,ANIOQNA,EDO,RFC,PUESTO,CURP,NOMBRE,
"2013_01","2013_02","2013_03","2013_04","2013_05","2013_06",
"2013_07","2013_08","2013_09","2013_10", QNACON FROM CONTRATOS WHERE rownum <= 15');
oci_execute($stid);

  while ($fila = oci_fetch_array($stid, OCI_BOTH+OCI_RETURN_NULLS)) {
        echo"<tr>";
echo "<td>".$fila['ANIOQNA']."</td>"."<td>".$fila['EDO']."</td>"."<td>".$fila['RFC']."</td>"."<td>".$fila['PUESTO'] ."</td>".
     "<td>".$fila['CURP']."</td>"."<td valor='$fila[IDCONTRATO]' class='click'>".$fila['NOMBRE']."</td>".
    "<td>".$fila['2013_01']."</td>"."<td>".$fila['2013_02']."</td>".
    "<td>".$fila['2013_03']."</td>"."<td>".$fila['2013_04']."</td>"."<td>".$fila['2013_05']."</td>"."<td>".$fila['2013_06']."</td>".
    "<td>".$fila['2013_07']."</td>"."<td>".$fila['2013_08']."</td>"."<td>".$fila['2013_09']."</td>"."<td>".$fila['2013_10']."</td>";
    echo "</tr>\n";
}
  ?>
 </tbody>

Lista desplegable:

<script src="js/jquery-2.1.1.js"></script>
<script>
 jQuery.noConflict();
(function($) {
     $(document).ready(function(){
        $('#anio').change(function(){
     var url = "aniocon.php";                                     
        $.ajax({                        
            type: "GET",                 
           url: url,                    
           data:$("#anio").serialize(),
           success: function(data)            
           {
             $("tbody").html(data);           
           }
         });

      });
    });
        })(jQuery);
</script>

JavaScript que me abre mi modal al dar doble click:

 <script>
 //ventana modal 
//Clase click
//datavalor=recoge el valor de la variable

$(".click").dblclick(function() {
      var parametros = $(this).attr("valor");
      alert(parametros);
      $('#myModal').show();
      $.ajax({
                data:   {parametros:parametros},
                url:   'grafica.php',
                type:  'GET',
                beforeSend: function () {
                        $("#resultado").html("<h2>Procesando, espere por favor...</h2>");
                },
                success:  function (response) {
                        $("#resultado").html(response);
                }
        });
     }); 
 }); 
2
  • Hola @Fernando, Bienvenido, para ayudarte necesitamos el fragmento de tu codigo, te invito a que te deas un recorrdio por la comunidad, Suerte Commented el 14 jul. 2017 a las 17:37
  • claro ese es mi código, acabo de editarlo realmente gracias por tomarte tu tiempo.
    – user51516
    Commented el 14 jul. 2017 a las 17:51

2 respuestas 2

0

Cuando se ejecuta

$(".click").dblclick(function() {...}

Estás ligando el handler(la función) sobre los elementos con la clase click en ese momento. El problema está en que cuando traes nuevos elementos al DOM

$("tbody").html(data); 

Estos nuevos elementos (aún teniendo la clase click), no fueron ligados a ese handler. Ahora, la solución está en; o volver a ligar estos nuevos elementos al handler, o (y esto es lo que te recomiendo), delegar el evento, que sería ligar el handler en un elemento padre que contenga a los elementos sobre los que quieres la acción, esto te lo permite a misma función on() de jquery

$('elemento_padre').on( evento [, selector ] [, data ], handler )

Que en tu caso sería

$("body").on(".click", "dblclick", function(){
...
});

Te recomiendo leer la parte de Direct and delegated events en la documentación de jquery de la función on

Algo que también funcionaría (no recomendado) es volver a delegar

$("tbody").html(data); 
$(".click").dblclick(function() {...}
4
  • Bueno entiendo mi clase click pertenece a el primer DOM en los nuevos datos que debo traer debo especificar una nueva clase un nombre diferente? o entendi mal de verdad disculpa por no conocer tanto acerca de esto y gracias por tu tiempo.
    – user51516
    Commented el 14 jul. 2017 a las 19:28
  • @Fernando no es un tema de clases, la clase está bien, el tema es cómo estás asignándole la función a los elementos de esa clase. En vez de usar la función dbclick() , usa la función on() para asignarle la función a los elementos, de la manera que puse en la respuesta. Commented el 14 jul. 2017 a las 19:35
  • Cambia $(".click").dblclick(function() { por $("body").on(".click", "dblclick", function(){ Commented el 14 jul. 2017 a las 19:39
  • si si gracias es lo que acabo de anañir espero funcione de verdad muchas gracias por tu tiempo, de verdad.
    – user51516
    Commented el 14 jul. 2017 a las 19:39
0

Cuando cargas código dinamicamente, los eventos cargados de esta forma:

$(".click").dblclick(function() {
    ...
}

no funcionan, porque estos se enlazan con los que estaban antes en el onReady en el DOM.

Por eso es preferible usar para hacer binding a un evento usar el .on.

$(".click").on('dblclick',function() {
    ...
}

De esa forma aseguras que haya escucha para los elementos iniciales como para los que se cargan de forma dinámica

3
  • ok, entonces de igual manera en el archivo que contiene mi nueva tabla debo incluir la clase click de igual manera como en la que se muestra al inicio y si me respeta el doble click cierto?
    – user51516
    Commented el 14 jul. 2017 a las 19:19
  • $(document).on("dblclick", ".click", function(){ corrigiendo un poco la respuesta arriba dada, debería ser así, primero el evento y después el selector. Ahora al incluir esto sustituyendo lo que tenias ($(".click").dblclick(function() {), le agrega listener a tus eventos doble click de elementos que estén actualmente en el dom o que puedan volver en tu respuesta ajax. No entiendo lo que mencionas con la clase click. Commented el 14 jul. 2017 a las 23:38
  • Garacias de hecho si tambien con mi poco conocimiento tome la respuesta y maso menos pensé en hacer lo que tu hiciste, y gracias ya logre resolverla, lo que me refería a la clase click es que en mis archivos de ajax en esos tengo una tabla que igual tiene la clase click, por eso pero gracias ya logre resolverla. De verdad gracias a todos por su tiempo. Se los agradezco demasiado de verdad.
    – user51516
    Commented el 17 jul. 2017 a las 14:31

Tu Respuesta

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