JQuery - Problema jQuery y AJAX

   
Vista:

Problema jQuery y AJAX

Publicado por Joaquin2102 (1 intervención) el 12/11/2014 23:35:04
Buenas a todos.

Ante todo dar las gracias por la atencion.

Verán, mi problema es que mediante jQuery capturo el evento de un "click" en la seccion "CATEGORIAS", y a partir de ahi me saca, mediante AJAX y servlets, las "SUBCATEGORIAS".

El problema viene a la hora de capturar el evento de esas subcategorias.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function busquedaSubCategorias() {
 
    $('.familia').click(function() {
        var familia = $(this).find('input:hidden').val();
 
        $('#contendorSubcategorias').children().remove();
        $.ajax({
            url: './consultaSubcategoria',
            data: {categoria: familia},
            dataType: 'json',
            type: 'POST',
            success: function(respuesta) {
 
                $.each(respuesta, function(key, value) {
 
                    var salida = '<li class="proSubCat"><a><img src="images/subCategorias/' + value.imagen + '"></img></a><input type="hidden" value="' + value.codigo_pk + '"/></li>'
                    $('#contendorSubcategorias').append(salida);
 
                });
 
            },
****************************************************
Vease que le añado la clase al li.
****************************************
 
function annadirProductoTicket() {
$(".proSubCat").click(function() {
    alert($(this));
    var valor = $(this).find('input:hidden').val();
 
    $.ajax({
        url: './addProTicket',
        data: {producto: valor},
        dataType: 'json',
        type: 'POST',
        success: function(respuesta) {
 
            $.each(respuesta, function(key, value) {
 
                var salida = '<tr class="resultados"><td class="filas">'
                        + '<input type="text" size="3" value="1"/>'
                        + '</td><td class="filas descripcion">' + value.nombre + '</td>'
                        + '<td class="filas"><input type="text" size="8" value="' + value.precio + '"/></td><td class="filas">'
                        + '<input type="label" size="8" value="' + (value.precio) * 2 + '/></td></tr>';
                $('#insertar').append(salida);
 
            });
 
        },
**************************

Y aqui esta el problema, cuando ya obtengo las subcategorias mediante el evento en las categorias... Ahora quiero hacer click en algun "LI" , capturando el evento $(".proSubCat").click(function() { , y no me lo coge. No hace nada, como si no existiese.

He probado a meter el metodo dentro del $(document) ready. A dejarlo fuera y a hacer las llamadas a las funciones dentro del $(document)... Y no se que mas puedo hacer.

Espero vuestra ayuda.

Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Problema jQuery y AJAX

Publicado por xve (557 intervenciones) el 13/11/2014 15:02:45
Hola Joaquin, tienes que volver a llamar a la función busquedaSubCategorias() para que cargue nuevamente el evento click en el DOM actual, si no, no te funcionara.
Tienes que hacer la llamada, una vez hayas insertado la salida en la pagina.

Creo que esta bien, que hayas colocado el evento click de jquery dentro de una función.

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema jQuery y AJAX

Publicado por Joaquin2102 (5 intervenciones) el 13/11/2014 16:18:39
Buenas xve, seguramente será esa una solución. Aún no la he podido probar, pero seguro que funcionaría.

Comentando mi problema con unos compañeros hemos llegado a otra conclusión.

Si el nuevo código es generado por AJAX, para que la función funcione en la clase/id/elemento creado hace falta poner
$('#id').on("click",function()

Ya que en el DOM no se ha cargado ese nuevo código.
He de probarla igualmente, pero es lo mismo que me has dicho, pero sin introducir la llamada para cargarlo en el DOM (creo).

Ya probaré esta tarde.

Gracias por tu aportación.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Problema jQuery y AJAX

Publicado por xve (557 intervenciones) el 13/11/2014 20:18:31
Ya nos comentaras como lo has hecho al final!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema jQuery y AJAX

Publicado por Joaquin2102 (5 intervenciones) el 13/11/2014 21:03:55
Aún sigo liado.

La forma que me dijeron no ha funcionado. Y la que tu me dices es poner <li onClick="annadirProTicket();"> ??

Es que no se bien a lo que te refieres.

Si me pudieses poner un ejemplo?

Aclaro que quiero capturar el evento de un LI que ha sido insertado mediante ajax.

Gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema jQuery y AJAX

Publicado por Joaquin2102 (5 intervenciones) el 13/11/2014 22:34:16
Bueno, gracias a dios di con la clave.

Explico por si alguien tiene el mismo problema.

Como la clase a la que queria asociar el evento era generada por AJAX no podia capturar el evento.
Para poder capturarlo debo apuntar al elemento padre, el cual no ha sido modificado desde que arranca la pagina.

En mi caso introducia elementos <li> con AJAX. Dentro de un <ul> estatico en la pagina. Ambos con id/class.

Bien, pues la función para poder capturar el evento en los <li> es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
        $(document).ready(function() {
    annadirProductoTicket();
 
        });
function annadirProductoTicket() {
            $("#contendorSubcategorias").on("click",'.proSubCat',function() {
                alert($(this));
});
}
</script>
 
$("#contendorSubcategorias").on("click",'.proSubCat',function() {

Donde #contendorSubcategorias es el elemento padre, el <ul>.
Y .proSubCat son los <li> generados mediante ajax, a los cuales le añado la clase en el string de salida.

Como he dicho antes, hay que apuntar al padre y como parametro en el On() hay que pasarle el evento que se producirá en él y en que elemento hijo.

Espero haberme explicado.

http://api.jquery.com/on/ Ahi es donde di con la solucion.

Un saludos a todos.

Y muy buen foro, en el que no hace falta registros para preguntar.

Recurriré siempre como primera opcion a esta magnifica pagina.

Saludos a todos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Problema jQuery y AJAX

Publicado por xve (557 intervenciones) el 14/11/2014 11:53:06
Gracias por compartirlo Joaquin
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar