entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Cargar enlaces desde dentro del div donde se ha de cargar

Hola estoy viene de otra pregunta que hice y a la que ya se me dio solución.

Esta función de jquery puesta en el index.php lo que hace es cargar en la etiqueta "section" los enlaces, aparte dependiendo del apartado cambia el fondo y cambia el estilo de una caja, según entre en un apartado u otro.

Pues bien, esta función, funciona perfectamente con los enlaces del menú que están en la etiqueta "nav", le doy a cualquier enlace y carga la sección correspondiente con dichos estilos, el problema es que las páginas que carga dentro de las etiquetas "section" también tienen enlaces, que se han de abrir en la misma sección, pues esto ultimo no funciona, carga la página al completo cargándose el index y todo.

He revisado los enlaces, el codigo, la función parece funcionar bien, pero no lo hace

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function()
    {       
        $(document).ready(function() 
        {
            $("a").click(function(event) 
            {
                event.preventDefault(); //Se cancela la redirección
                               var classenlace = "." + $(this,"a").attr("class");               

                $.ajax(
                {
                    url: $(this).prop("href")                   
                }
                ).done(function(data)
                {
                    var nombre = $(classenlace).data('nombre');
                    var me = $(classenlace).data('value');  
                    me = "#" +nombre + me;  
                    $("#section").html(data);

                    if (nombre == "contenido") 
                    {
                        $("#section").css(
                        {
                                "background": "none",
                                "background-color": "#FFFFFF",
                        });                     
                        /*$(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });*/
                    }                   
                    if (nombre == "menucv") 
                    {
                        $("#section").css(
                        {
                                "background": "none",
                                "background-color": "#FFFFFF",
                        });                     
                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });
                    }                               
                    if (nombre == "amstrad") 
                    {
                        $("#section").css(
                        {
                                "background": "none",
                                "background-color": "#010080",
                        });                     
                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });
                    }           
                    if (nombre == "autor") 
                    {
                        $("#section").css(
                        {
                                "background": "none",
                                "background-color": "#FFFFFF",
                        });                     
                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });
                    }       
                    if (nombre == "peliculas") 
                    {
                        $("#section").css(
                        {
                            "background-image": "url('../imagenes/sepia.jpg')",
                                "background-repeat": "repeat",  
                        });

                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"                  
                        });
                    }               
                    if (nombre == "maquinitas") 
                    {
                        $("#section").css(
                        {
                            "background": "none",
                                "background-color": "#FFFFFF",
                        });

                        $(me).css(
                        {
                        /*"background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"  */                  
                        });
                    }               
                    if (nombre == "playmobil") 
                    {
                        $("#section").css(
                        {
                            "background-image": "url('../imagenes/playmobil/fondo-play.jpg')",
                                "background-repeat": "repeat",  
                        });

                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"                  
                        });
                    }               
                    if (nombre == "album") 
                    {
                        $("#section").css(
                        {
                            "background-image": "url('../imagenes/cromos_fondo.png')",
                                "background-repeat": "repeat",  
                        });

                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"                  
                        });
                    }           

                });                 
            });
        }); 
    }, 
    false);

</script>

Formato de los enlaces:

En el menú:

• <a href="../paginas/cv.php?valor=1" class="enlace-cv" data-nombre="menucv" data-value="1">cv</a>

Dentro de la página que se carga en el "section":

<div id="menucv2"><a href="../paginas/cv.php?valor=2" class="2enlace-cv2" data-nombre="menucv" data-value="2">Estudios</a></div>

Como podéis apreciar los 2 enlaces tienen el mismo formato, pero solo funcionan los enlaces que están por fuera del section, los que están dentro no funcionan bien, creo que es porque cambia algo del código de la página intento analizarlo con la herramienta de Chrome para desarrolladores, el debug de javascript que lleva incorporado el Google Chrome pero no consigo ver donde esta el fallo. A ver si me podéis echar una mano.

0voto

bichomen comentado

Hola, como veo que no me responde nadie he creado una pequeña web recreando el problema que tengo, pongo aquí el enlace, quizás de esta manera alguien vea el problema:
http://www.bichomen.com/Pruebadom/

1 Respuesta

1voto

carlossevi Puntos63580

Cuando se carga la página, el html incluye 5 enlaces (etiquetas del tipo <a>) en el código: los 4 del menú superior y el que se incluye en el primer <main> que carga por defecto.

A esos 5 enlaces se les añade el evento que previene el seguimiento del enlace por defecto y hace la llamada AJAX. Cualquiera de esos 5 enlaces funciona "correctamente".

El problema es que en las cargas de html que se añaden posteriormente dentro de <main> se incluyen nuevos enlaces que no estaban contemplados antes y a los cuales no se les ha añadido el evento. Esos siguientes enlaces son los que no se están comportando como quieres.

La solución pasa por vincular el evento a un elemento superior que los contenga. Un ejemplo:

$('.misenlaces').on('click', 'a', function(){
    // lo que sea
});

Se ejecutará para cualquier enlace contenido dentro, aunque haya sido incluido a posteriori:

<div class="misenlaces">
    <!-- <a> Elementos que se añaden dinámicamente -->
</div>

0voto

bichomen comentado

Hola carlossevi,

He aplicado lo que comentas a los enlaces tanto de menú como de las diferentes páginas le he puesto un div con class="enlaces" y en section he creado class="section" y funciona a medias, pero en algún momento falla

document.addEventListener("DOMContentLoaded", function()
    {       
        $(document).ready(function() 
        {
            $(".enlaces").on("click", "a", function(event) 
            {
                event.preventDefault(); //Se cancela la redirección

                var nombre = $(this,"a").attr("id");

                $.ajax(
                {
                    url: $(this,"a").prop("href"),

                }
                ).done(function(data)
                {

                    alert(nombre);

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

                });             
            });
        }); 
    }, 
    false);

1voto

bichomen comentado

Solucionado, la clave es lo que dices tu:

La solución pasa por vincular el evento a un elemento superior que los contenga.

document.addEventListener("DOMContentLoaded", function()
    {       
        $(document).ready(function() 
        {
            $("body").on("click", "a", function(event) 
            {
                event.preventDefault(); //Se cancela la redirección

                var nombre = $(this,"a").attr("id");

                $.ajax(
                {
                    url: $(this,"a").prop("href"),

                }
                ).done(function(data)
                {

                    alert(nombre);

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

                });             
            });
        }); 
    }, 
    false);

Y no hay elemento más superior que el body. :-D

Muchas gracias

1voto

carlossevi comentado

(por favor mueve tu respuesta a comentario)

Es cierto, no hay nada más superior que el body, aunque tienes que tener cuidado porque no en cualquier escenario funciona aplicar la misma regla a todos los enlaces <a> que haya dentro del body, de ahí el interés en de usar selectores más restrictivos.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta