Blog Reacción Estudio

¡Tu zona de aprendizaje!

Asignar evento a un elemento generado dinámicamente con jQuery

Asignar evento a un elemento generado dinámicamente con jQuery

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.

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