¿Como saber cuando se ha hecho click sobre un boton, que fue generado dinamicamente en JS?

publicado por: Anonymous

Estoy trabajando en una aplicación web implementando HTML, JAVASCRIPT, JQUERY

Desde JAVASCRIPT, estoy agregando codigo HTML, para generar botones, conforme los necesite, dentro de un for, pero solo añado como lo estoy agregando con el siguiente código:

x +="<button type="button" class="btn boton-eliminar-tratamiento" name="DIENTE-1-TRATAMIENTO-1"" >ELIMINAR</button>";
document.getElementById("p-tratamientos").innerHTML = x;

Hasta ahí todo me funciona bien. Los botones si aparecen en el HTML. Mi problema es cuando ahora quiero ver si el usuario apretó dicho botón. Lo intente con el siguiente codigo:

$(".boton-eliminar-tratamiento").click(function(){
    alert('Ha hecho click sobre el boton'); 
    return true; 
});

En teoría debería hacerlo, pero estoy casi seguro que tiene que ver que el botón lo genere de manera dinámica desde JS con el innerHTML y por eso no entra al click.

solución

Prueba cambiando tu porción de código:

$(".boton-eliminar-tratamiento").click(function(){
    alert('Ha hecho click sobre el boton'); 
    return true; // TIP: esto no es necesario de todas formas
});

A este código, el cual vendría siendo un delegated event listener (enlace en inglés):

$(document).on('click', '.boton-eliminar-tratamiento', function(){
    alert('Ha hecho click sobre el boton'); 
});

Cuando creas elementos dinámicamente y los añades al árbol del DOM estos no son escuchados por jquery mediante el común $('selector'), por lo tanto debes usar el delegated event listener con el $(document).on('event', 'selector', callback) como te muestro en el ejemplo anterior.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *