problemas con los eventos jquery al usar ajax

itnas87 · #1 (**permalink**) 15/09/2012, 20:31

hola soy nuevo en el foro, mi duda es la siguiente:

¿porque cuando se inserta en una pagina mediante $.ajax $.get $.post codigo html ya sea desde php o del mismo sentencia jquery si ya tienes creado un evento para los botones por ejemplo, por que funciona con todos menos el que se ha creado con ajax?

me gustaria saber si eso ay alguna forma de solucionarlo ya sea alguna version de jquery u otra coasa con tal de no tener q crear las funciones y volver a llamarlas

gracias de ante mano

autonotel · #2 (**permalink**) 16/09/2012, 01:35

Porque la función que recoge el evento está creada antes de crear el elemento del que se espera ese evento.

gebremswar · #3 (**permalink**) 16/09/2012, 03:07

Hola itnas87, Bienvenido Foros del Web.

La primera pregunta ya la respondió autonotel.

Cita:

Iniciado por itnas87

me gustaria saber si eso ay alguna forma de solucionarlo ya sea alguna version de jquery u otra coasa con tal de no tener q crear las funciones y volver a llamarlas ...

Ahora. Como solucionarlo? Pues hace bastante tiempo encontré muchas soluciones a este problema aquí en el foro, como por ejemplo estas dos:

Cargar un fichero javascript con el método .getScript() de JQuery a finalizar una llamada asíncrona con ajax.
Utilizar el socorrido método .live() de JQuery (actualmente obsoleto) para poder capturar los eventos de los elementos añadidos asíncronamente.

Entonces... ¿Cual escoger?

El primero lo utilizaba para cargar nuevamente el .js y que considere los nuevos elementos.

En cuanto al segundo, dejé de utilizarlo rotundamente cuando leí el siguiente artículo: Porqué no debemos usar nunca jQuery Live.

Lo mejor es utilizar el método .on() para asociar eventos. Puedes leer sobre dicho método y su contrario/complementario .off() para eliminar eventos en este artículo.

Te doy una idea de como utilizar .on() con el siguiente ejemplo.

Código Javascript:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>@GBreagan</title>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
var newLink = '<a class="lnk" href="#">[Clickme!]</a> <br>';
$(document).on('ready',function() {
    $('#myLinks').on('click', 'a.lnk', function(event){
        event.preventDefault();
        alert('Clicked!');
    });
    $('#add').on({
        click:function(){
            $('#myLinks').append(newLink);
        }
    });
});
</script>
</head>
<body>
<input type="button" id="add" value="Add new link">
<div id="myLinks">
    
</div>
</body>
</html>


Necesitas como mínimo la versión 1.7 de JQuery para hacer uso de .on() y .off().


itnas87 · #4 (**permalink**) 16/09/2012, 08:19

Gracias por su respuesta, pero no se si es que no se como se hace o no esta bien echo por eso os dejo parte del codigo que uso.

aqui os dejo el codigo donde desde ajax se inserta dentro de otro div llamado .qbox desde un archivo php.

Código HTML:

Ver original<div>
        <img class="crr" src="images/icons/cls.png" title="Cerrar">
    </div>

aki el codigo javascript para que cuando se pulse la imagen se cierre div.qbox

Código Javascript:

Ver original$("img.crr").on("click", function(){
        $("div.qbox").hide();
    });

también he probado este código javascript

Código Javascript:

Ver original$("img").on("click",".crr", function(){
        $("div.qbox").hide();
    });

La versión de jquery que estoy utilizando es la ultima 1.8.1

De nuevo gracias de ante mano.

gebremswar · #5 (**permalink**) 16/09/2012, 11:11

Prueba con esto:

Código Javascript:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multi Form Edit</title>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
var newImg = '<div><img class="crr" src="http://groups.viadeo.com/template/images/global/dialogs/close-button.png" title="Cerrar"></div>';
$(document).on('ready',function() {
    $('#add').on({
        click:function(){
            $('.qbox').append(newImg);
        }
    });
    $('div.qbox').on("click", 'img.crr', function(){
        $("div.qbox").hide();
    });
});
</script>
</head>
<body>
<input type="button" id="add" value="add new image">
<div class="qbox">
</div>
</body>
</html>

Coméntanos.

itnas87 · #6 (**permalink**) 30/09/2012, 05:32

Muchas gracias por esta solución pero debido a mi reciente conocimientos me ha creado una duda que son las siguientes

Estas tres forma de que jquery lea el documento para hacer las diferente instrucciones son iguales o hay alguna diferencia entre ellas.

Código Javascript:

Ver original$(document).on("ready",function(){
                // aqui instrucciones
        });
    $(document).ready(function(){
                // aqui instrucciones
        });
    $(function(){
                // aqui instrucciones
        });

he leido que a un mismo se le puede asignar diferente funciones a distintos eventos, esto es lo que teniamos.

Código Javascript:

Ver original$("div.qbox").on("click","img.crr",function(){
        $("div.qbox").hide();
    });

ESTE SERA DICHA ESTRUTURA PARA HACER UNA FUNCION POR EVENTO

Código Javascript:

Ver original$("div.qbox").on({
        click: function(){
            $("div.qbox").hide();
        },
    });

me gustaria saber como se puede hacer dicha estructura puesto que e probado por probar pero siguiendo la estructura pero ninguna me a funcionado:

Código Javascript:

Ver original$("div.qbox").on("img.crr",{
        click: function(){
            $("div.qbox").hide();
        },
        mouseover: function(){
            // otra instruccion de cabiar de imagen
        }
    });
 
    $("div.qbox").on("click mouseover","img.crr",{
        click: function(){
            $("div.qbox").hide();
        },
        mouseover: function(){
            // otra instruccion de cabiar de imagen
        }
    });

jlomss · #7 (**permalink**) 30/09/2012, 17:48

Hola, disculpen alguno ha usado, uploadify 3.2?? no puedo insertar en mysql por medio de php el nombre de la imagen subida, podrian ayudarme por favor?? gracias por su tiempo

itnas87 · #8 (**permalink**) 01/10/2012, 07:39

No, lo siento no lo he utilizado nunca pero si tendre que utilizarlo mas adelante, lo q no se si usare o no upladify 3.2

Pero podria subir archivos con otro aplicacion yo tengo vista esta

http://www.w3schools.com/php/php_file_upload.asp

itnas87 · #9 (**permalink**) 01/10/2012, 07:40

Cita:

Iniciado por jlomss

Hola, disculpen alguno ha usado, uploadify 3.2?? no puedo insertar en mysql por medio de php el nombre de la imagen subida, podrian ayudarme por favor?? gracias por su tiempo

No, lo siento no lo he utilizado nunca pero si tendre que utilizarlo mas adelante, lo q no se si usare o no upladify 3.2

Pero podria subir archivos con otro aplicacion yo tengo vista esta es simple pero se puede modificar si ya sabes utilizar php,

http://www.w3schools.com/php/php_file_upload.asp

itnas87 · #10 (**permalink**) 01/10/2012, 07:51

Espsero que te sirva. Debido a mi reciente conocimientos sobre .on() me ha creado una duda que son las siguientes

he leido que a un mismo se le puede asignar diferente funciones a distintos eventos, esto es lo que teniamos.

Código Javascript:

Ver original$("div.qbox").on("click","img.crr",function(){
         $("div.qbox").hide();
    });

ESTE SERA DICHA ESTRUTURA PARA HACER UNA FUNCION POR EVENTO

Código Javascript:

Ver original$("div.qbox").on({
         click: function(){
              $("div.qbox").hide();
         },
    });

me gustaria saber como se puede hacer dicha estructura puesto que e probado por probar pero siguiendo la estructura pero ninguna me a funcionado:

Código Javascript:

Ver original$("div.qbox").on("img.crr",{
          click: function(){
               $("div.qbox").hide();
          },
          mouseover: function(){
               // otra instruccion de cabiar de imagen
          }
     });
 
     $("div.qbox").on("click mouseover","img.crr",{
          click: function(){
               $("div.qbox").hide();
          },
          mouseover: function(){
               // otra instruccion de cabiar de imagen
          }
     });

Estas tres forma de que jquery lea el documento para hacer las diferente instrucciones son iguales o hay alguna diferencia entre ellas.

Código Javascript:

Ver original$(document).on("ready",function(){
           // aqui instrucciones
    });
    $(document).ready(function(){
           // aqui instrucciones
    });
    $(function(){
           // aqui instrucciones
    });