Capturar Link dinámico

[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).