Capturar Link dinámico

[ElAthlit]

Hola,
soy nuevo en Jquery y estoy pelandome con lo siguiente:

Tengo esta función:

Código Javascript:

<SCRIPT>
var num = 0;
$(document).ready( function (){ 
$("#boton").click(function() {
    
    num++;
    var strHTML = $("#test").html();
    $("#test").html(strHTML + "<div id='capa"+num+"'>Capa de texto   <a href='#' id='link'>Link "+num+"</a></div>");
});
});
</script>
 

Lo único que hago es que al apretar un botón me vaya saliendo:
Capa de texto Link 1
Capa de texto Link 2
Capa de texto Link 3
....

Cuando hago click en Link 1/2 o 3, no puedo capturar el evento.

Sin embargo tengo el siguiente código para capturar el enlace:

Código Javascript:

<SCRIPT>
$(document).ready( function (){ 
$("#link").click(function() {
    alert("ep!");
});
});
</script>
 

Me he fijado que si el enlace lo creo yo a mano, capturo el enlace perfectamente pero si lo creo dinámico, entonces no hace nada.

En enlace que pongo a mano es idéntico al dinámico.

Código HTML:

<a href='#' id='link'>Link</a>
 

Alguien sabe como puedo capturar el enlace dinamico (link1, 2, 3,...) para que al pulsar haga el alert()?

Gracias a todos y un saludo.

[ElAthlit]

Algún moderador me lo puede mover a "Frameworks JavaScript" por favor?

Gracias.

[alexg88]

Buenas,

Esta duda la tiene mucha gente, deberíamos incluirla en la wiki de Javascript, o en un apartado de JQuery.

El problema radica en que los eventos se enlazan a los elementos que están definidos en el momento que se ejecuta el script, es decir, a los elementos añadidos dinámicamente después de la ejecución no se les ha enlazado el evento.

Otro error es que el id es único (sólo un elemento puede tener un id). Para lo que tu quieres debes usar class.

Para solucionar esto tienes dos formas:

Asignar el evento tras añadir los elementos:

Código Javascript:

$(document).ready( function (){ 
$("#boton").click(function() {
    
    num++;
    nuevoElemento = $("<div class='capa"+num+"'>Capa de texto   <a href='#' class='link'>Link "+num+"</a></div>");
 
    $(".link",nuevoElemento).click(function() {
    alert("ep!");
});
 
 
    $("#test").append(nuevoElemento);
   
});
});
 

ó usando delegate:

Código Javascript:

$(document).ready( function (){ 
var num = 0;
 
$("#boton").click(function() {    
    num++;
   
  
    $("#test").append("<div class='capa"+num+"'>Capa de texto   <a href='#' class='link'>Link "+num+"</a></div>");
    
    
});
 
$("#test").delegate(".link","click",function() {
    alert("ep!");
});&#8203;
});
 

En la nueva versión de JQuery se puede usar el nuevo método on en vez de delegate (mírate la documentación).

[caricatos]

Iniciado por ElAthlit

Algún moderador me lo puede mover a "Frameworks JavaScript" por favor?

Gracias.

Hola:

Hay un pequeño triángulo a la izquierda de los mensajes, junto a los datos del autor, para reportar mensajes. Es la mejor forma de advertir a los moderadores (no suelo visitar todos los mensajes, y dudo que los que ayudamos en estos foros tengan capacidad para leerlos).

Mensaje movido.

Saludos

[ElAthlit]

Hola alexg88,
muchas gracias por tan magnífica explicación, de verdad. Me lo has dejado clarísimo!!

Hola caricatos,
lo desconocía, para la siguiente vez ya lo se

Gracias!!!