aplicar método ON a función jquery

[evoarte]

buenas noches,

tengo este código

Código Javascript:

jQuery(window).load(function() {
            $('.gallery').each(function() { // the containers for all your galleries
                $(this).magnificPopup({
                    delegate: 'a', // the selector for gallery item
                    type: 'image',
                    gallery: {
                        enabled:true
                    }
                });
            }); 
        });
 

Código HTML:

<div class="gallery">
                    <a title="títulodelaimagen" href="rutadelaimagen">nombredelaimagen</a>
                </div>
 

Le debería aplicar el método ON para usarlo con click.

Necesito usuarlo para cuando se hace una recarga con ajax después de la carga inicial de la página. Tendría que combinar on y each para aplicarlo a todos los elementos que se cargan con ajax.

saludos,
josé carlos.

[evoarte]

hola,

voy a intentar explicarlo mejor, utilizo magnific popup para ver las imágenes con un slider, cuando las imágenes se muestran en la carga inicial de la página toda va bien,

el problema viene cuando una vez cargada inicialmente la página mediante ajax, muestro el enlace a varias imágenes que pretendo visualizar con un slider

Código Javascript:

<script type="text/javascript" async defer src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" async defer src="jquery.magnific-popup.min.js"></script>
 
        jQuery(window).load(function() {
            $('.gallery').each(function() { // the containers for all your galleries
                $(this).magnificPopup({
                    delegate: 'a', // the selector for gallery item
                    type: 'image',
                    gallery: {
                        enabled:true
                    }
                });
            }); 
        });
 

Código HTML:

<div class="gallery">
<a title="títulodelaimagen1" href="rutaimagen1">nombredelaimagen1</a>
<a title="títulodelaimagen2" href="rutaimagen2">nombredelaimagen2</a>
<a title="títulodelaimagen3" href="rutaimagen3">nombredelaimagen3</a>
</div>
 

Y lo he intentado de mil maneras,
- incluyendo el método ON y utilizando la última versión de jquery, actualizando a la última versión de magnific popup, con un resultado infructuoso.

El código que muestro es el que funciona cuando las imágenes se cargan en la carga inicial

gracias,
josé carlos.

[andresgarciadev]

tendrias q mostrar el codigo del ajax para ver que estas haciendo mal, en el ajax les vuelves a aplicar
.magnificPopup()
a todos esos nuevos elementos creados?

[evoarte]

Iniciado por andresgarciadev

tendrias q mostrar el codigo del ajax para ver que estas haciendo mal, en el ajax les vuelves a aplicar
.magnificPopup()
a todos esos nuevos elementos creados?

No, no vuelvo a aplicar .magnificPopup();
He intentado utilizar el metodo .on de jquery,
pero no tengo los conocimientos suficientes.

saludos,
josé carlos.

[evoarte]

hola,

como me veo incapaz de aplicar correctamente el método .on() de jquery a los enlaces <a> con class .gallery que se cargan dinámicamente con ajax, he intentado ejecutar el código jquery que forma la galería una vez cargados los datos por ajax de la siguiente forma, pero sin resultado:

Código Javascript:

Cargamos el HTML recibido                           */
function leerDatosTX()
    {
        if (oXML.readyState==1)
            {
                document.getElementById("cargando").style.display= 'block';
                document.getElementById("cargando").innerHTML = '<img src="http://www.urldelapágina.com/images/ajax/ajax-loader.gif">';
                document.getElementById("documentos").style.display = 'none';
            }
        else if (oXML.readyState==4)
            {
                var cadena = oXML.responseText;
                var mensajes = cadena.split(",");
                var accion = mensajes[0];
                if (accion == 'mensajes')
                    {
                        for ( i=1;i<mensajes.length;i++ )
                            {
                                alert(mensajes[i]);
                            }
                        document.getElementById("cargando").style.display= 'none';
                        document.getElementById("cargando").innerHTML= '';
                        document.getElementById("documentos").style.display= 'block';
                        ga('send', 'pageview', urlGO.replace("http://www.urldelapágina.com",""));
                    }
                else if (accion == 'alertas')
                    {
                        var atextodi = "";
                        for ( i=1;i<mensajes.length;i++ )
                        {
                            atextodi += mensajes[i] + "<br /> ";
                        }
                        document.getElementById("cargando").style.display= 'none';
                        document.getElementById("cargando").innerHTML= '';
                        document.getElementById("documentos").style.display= 'block';                       
                        document.getElementById(capa).innerHTML = atextodi;
                        ga('send', 'pageview', urlGO.replace("http://www.urldelapágina.com",""));
                    }                   
                else if (accion == 'redireccionGU')
                    {
                        cadenaURLtx(mensajes[1],mensajes[2],mensajes[3]);
                    }
                else if (accion == 'redireccionGO')
                    {
                        OajaxT(mensajes[1]);
                    }
                else
                    {
                        document.getElementById("cargando").style.display= 'none';
                        document.getElementById("cargando").innerHTML= '';
                        document.getElementById("documentos").style.display= 'block';
                        document.getElementById("documentos").innerHTML=oXML.responseText;
                        ga('send', 'pageview', urlGO.replace("http://www.urldelapágina.com",""));
                        if ( $('.gallery').length > 0 )
                        {
                            console.log('Hay ' + $('.gallery').length + ' elementos imagen en el documento');                       
                            $('.gallery').each(function() { // the containers for all your galleries
                                $(this).magnificPopup({
                                    delegate: 'a', // the selector for gallery item
                                    type: 'image',
                                    gallery: {
                                    enabled:true
                                    }
                                });
                            });                         
                        }                       
                    }
            }
    }
 

el código que he añadido es este, no hay error, pero creo que no se ejecuta por que no se muestra el mensaje del número de imágenes (console.log):

Código Javascript:

if ( $('.gallery').length > 0 )
                        {
                            console.log('Hay ' + $('.gallery').length + ' elementos imagen en el documento');                       
                            $('.gallery').each(function() { // the containers for all your galleries
                                $(this).magnificPopup({
                                    delegate: 'a', // the selector for gallery item
                                    type: 'image',
                                    gallery: {
                                    enabled:true
                                    }
                                });
                            });                         
                        }
 

agradecería vuestra ayuda,
un saludo,
josé carlos.

[Flow89]

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

Así mapeas todo lo que tenga la class gallery y le asignas la función que quieras al hacer click en el objeto.

Que es lo que no entiendes exactamente de esa función?

Tengo prisa y estoy desde el móvil, siento poder ayudarte más.

[evoarte]

estos códigos los añado justo después de procesar la petición ajax, una vez cargados los enlaces <a> con href="rutaimagen"

he sustituido el código añadido anterior, con el que no había resultado,:

Código Javascript:

if ( $('.gallery').length > 0 )
                        {
                            console.log('Hay ' + $('.gallery').length + ' elementos imagen en el documento');                       
                            $('.gallery').each(function() { // the containers for all your galleries
                                $(this).magnificPopup({
                                    delegate: 'a', // the selector for gallery item
                                    type: 'image',
                                    gallery: {
                                    enabled:true
                                    }
                                });
                            });                         
                        }
 

por este otro nuevo código, pero también sin resultado:

Código Javascript:

$(".gallery").on('click', function() {
                            $('.gallery').each(function() { // the containers for all your galleries            
                                $(this).magnificPopup({
                                    delegate: 'a', // the selector for gallery item
                                    type: 'image',
                                    gallery: {
                                        enabled:true
                                    }
                                });
                            });
                        });
 

[Flow89]

Si con $(".gallery").on('click', function() { estas mapeando todos los objetos, no entiendo porque despues utilizas la funcion each.

Con esto tampoco te funciona?

Código Javascript:

$(".gallery").on('click', function() {
$(this).magnificPopup({
                                    delegate: 'a', // the selector for gallery item
                                    type: 'image',
                                    gallery: {
                                        enabled:true
                                    }
                                });
                            });
 

Un saludo.