Jquery y actualizaciones dinámicas de contenido de un Div

[TheDawn]

Primero que todo hola a todos.

Acabo de registrarme en el foro, a ver si podéis echarme una mano.

Tengo una lista <ul> con un elemento <li>

Código:

<ul id="nav">
     <li><a href="test.htm">Leer</a></li>
</ul>

Y dispongo de un div vacío

Código:

<div id="show"></div>

La idea es cargar en el div SHOW, el documento "test.htm".

Para ello, dispongo de la siguiente función de la librería Jquery

Código:

<script type="text/javascript">
	$(document).ready(function(){
		  $("#nav a").each(function(){
			 var href = $(this).attr("href");
			 $(this).attr({ href: "#"});
			 $(this).click(function(){
			 $("#show").load(href);
		         });
	           });
	});
</script>

Hasta aquí todo correcto, al hacer click en el link de la lista, carga correctamente el documento en el div SHOW.

Mi consulta y duda viene ahora.

Quiero cargar por ejemplo un elemento <li> nuevo dentro de la lista.

Para ello, dispongo de otra función de la librería Jquery.

Código:

<script type="text/javascript">
	$(document).ready(function(){
		$("#testAdd").each(function(){
			$(this).click(function(){
				$("#nav").append("<li><a href=\"test2.htm\">Añadido</a></li>");
			});
		});
	});
</script>

Creo un link para probar la función

Código:

<a id="testAdd" href="#">Añadir</a>

Me dispongo a probarlo, y parece que funciona, ya que se crea el nuevo link "Añadido" dentro de la lista, pero aquí viene la duda.

Ese nuevo link, cuando le das, en vez de cargar el contenido dentro del Show como el anterior, lo abre como un link normal.

¿Alguien sabe cuál puede ser el problema?¿Por que lo abre como un link normal, en vez de cargarlo dentro del show como el que ya está en el código?

Gracias.

[alexg88]

Buenas,

La respuesta es sencilla.

Esto ocurre porque no está enlazado el evento click al nuevo enlace. Es decir, el código que se encarga de convertir en enlace en un código que carga la página dentro de un div sólo se ejecuta sobre los enlaces que están en el código cuando se ejecuta el script.

Cuando añades un enlace de manera dinámica, no estás volviendo a ejecutar ese código para que se escuche al evento click del nuevo enlace.

Se me ocurre que puedes hacer algo así:

Código Javascript:

$(document).ready(function(){ 
          $("#nav a").each(function(){
             var href = $(this).attr("href");
             $(this).attr({ href: "#"});
             $(this).click(function(){                
             $("#show").load(href);            
                 });
               });
   
 
$("#testAdd").click(function(){
    
    nuevo = $("<li><a href=\"test2.htm\">Añadido</a></li>");   
  
    enlace = $('a',nuevo);
    
      var href = enlace.attr("href");
             enlace.attr({ href: "#"});
             enlace.click(function(){           
                 $("#show").load(href);               
                 }); 
    $("#nav").append(nuevo);  
    });
});
 

Si tienes dudas de algo, no dudes en preguntar.

Saludos

[TheDawn]

Gracias por la respuesta. Mañana lo probaré y te comentaré como me ha ido.

Muchas gracias por perder tu tiempo en mi consulta. Un saludo.

[TheDawn]

Funciona perfectamente.

Muchas gracias Alex.