Cuando queremos asignar un evento de jQuery a un elemento que hemos generado dinámicamente, como por ejemplo la respuesta HTML de una petición que hemos realizado mediante Ajax, no nos sirve el método tradicional, ya que si probamos el siguiente código con un elemento generado dinámicamente podemos comprobar que no hace nada.


/* Este ejemplo no funciona al hacer click sobre el enlace 
que generamos dinámicamente. */

$(document).ready(function(){
	
	$("a#boton").on("click",function(event){
		event.preventDefault();
		
		alert("Probando asignación");
		
	});

	// Generamos el enlace dinámicamente
	$("body").html("<a href='#' id='boton'>Botón</a>");

});

Para poder crear el evento al elemento generado, debemos hacerlo de la siguiente manera:


// Esto si funciona para un elemento generado dinámicamente.

$(document).ready(function(){
	
	$("body").on("click","a#boton",function(event){
		event.preventDefault();
		
		alert("Probando asignación");
		
	});

	// Generamos el enlace dinámicamente
	$("body").html("<a href='#' id='boton'>Botón</a>");

});

Como véis ponemos al “body” como el selector principal y después de asignarle el evento “click“, le indicamos el selector del elemento al que le queremos asignar este evento.

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR