A veces pasa que los elementos dinámicos no responden a los eventos. Por ejemplo, creas un link con información proveniente de una llamada Ajax y defines un evento click sobre ese link para mostrar un alert. Pero el evento no funciona. Este post explica cómo solucionar este problema mediante la técnica de delegación de eventos a un padre.

Veamos un ejemplo,

JS Bin

Cuando carga la página, luego de 2 segundos, Javascript crea un nuevo link en la página. Se supone que hay un evento para todos los enlaces de la clase link que hace aparecer un alert. Pero este enlace, al ser generado por Javascript, no funciona :(.

Lo que esta pasando aquí es que jQuery solo se preocupa de capturar los eventos una vez al cargarse y parsear el DOM (esto no es exactamente así, pero haría muy complejo el post innecesariamente). La línea que está dando problemas es:

$('.link').on( 'click', function(){
    alert( 'El evento funciona!' );
  } );

¿Cómo arreglamos este problema? Pues muy fácil: DELEGACIÓN (más aquí). Vamos a decirle al document que todos los eventos que lleguen a él, pero que hayan sido generados por uno de sus hijos con clase link, deben generar un alert de navegador (esto también es una simplificación, pero entrar en detalles no echaría mucha más luz para esta solución en concreto. Si tienes curiosidad, te recomiendo que leas jQuery Pocket Reference ).

JS Bin

Ahora sí funciona :). Simple, ¿verdad?! Si tienes más dudas como estas, no dudes en dejarme un comentario y prometo poner lo mejor de mí para ayudarte.

Suscríbete a mi lista de correo

* Campos obligatorios