función load() jquery , rellamada a la misma capa

gbjuanlu · #1 (**permalink**) 12/03/2012, 05:16

Hola a todos, antes de nada quiero dar las gracias de antemano por el simple hecho de leer el post.
Estoy tratando de cargar una página en una capa con la funcion load de jquery, hasta ahí todo perfecto.
El problema viene cuando una vez cargada la página en la capa, quiero hacer un enlace de la pagina cargada y que se vuelva a visualizar en la misma capa.

Ejemplo:
Al pulsar Enlace 1 me carga una pagina en una capa llamada #mostrar.
Y dentro de la página contiene un enlace que al pulsarlo quiero que me lo cargue tambien en la capa #mostrar

Codigo index.php

Código Javascript:

Ver original<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var x;
    x=$(document);
    x.ready(inicio);
    
    function inicio(){
            var x;
            x=$("a");
            x.click(muestrame);
    }
     function muestrame(){
         var pagina=$(this).attr("href");
         var x=$("#mostrar");
         x.load(pagina);
         return false;
     }
 
 
</script>
</head>
 
<body>
<a href="pagina2.php?color=verde">Verde</a>
<div id="mostrar"> </div>
</body>
</html>

En la página q carga hay un enlace y quiero q lo muestre tambien en la misma capa #mostrar

Código PHP:

Ver original<?php
if($_GET['color']=='verde')
    echo "El color que has pulsado es el verde";
 
?>
 
 
<a href="nuevo.php">Enlace que quiero que me cargue en la capa mostrar</a>

MUCHISIMAS GRACIAS DE ANTEMANO.

Naahuel · #2 (**permalink**) 12/03/2012, 07:47

Espero haber entendido correctamente.

El asunto es que al momento de asignar la función muestrame() al evento click de los <a>, estos sólo se asignan a los que existen en ese momento en el DOM. Este comportamiento es muy obvio y esperable, pero a todos se nos pasa.

jQuery tiene un método para tratar con este asunto, llamado .delegate(). Se usa de esta forma:

Código Javascript:

Ver originalfunction inicio(){
        var x;
        x=$("a");
        //x.click(muestrame);
        $('#contenedor').delegate('a','click',muestrame)
}

Necesitás envolver todo en un contenedor (yo le puse el id de ejemplo "contenedor"). A ese contenedor le decís que todos los <a> (o cualquier selector jQuery, por supuesto) en su interior que existen ahora y que exisitrán después, deben ejecutar tal función en tal evento.

gbjuanlu · #3 (**permalink**) 12/03/2012, 07:58

Muchas gracias por contestar Naahuel,
Me ha contestado tambien un colaborador del foro por que me confundi de tema y lo duplique aquí.
La solución que he optenido y funciona es así:

Código Javascript:

Ver originalfunction inicio()
{
            var x;
            x=$("a").live("click",muestrame);
            x.click(muestrame);
}

Funciona correctamente.
MUCHAS GRACIAS