1

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.

4
  • tu código funciona perfectamente solo que al final agregas por error 2 comillas ...-1-TRATAMIENTO-1"\" >ELIMINAR...
    – fwBasic
    Commented el 21 abr. 2017 a las 0:59
  • entiendo que tiene respuesta y la aprobacion y todo, pero lo que no logro entender es el porque del titulo. "¿Como obtener el name de un button cuando a este se le da click?".. Lo correcto no seria mejor "¿Como saber cuando se ha hecho click sobre un boton?" o algo parecido.
    – bypabloc_
    Commented el 21 abr. 2017 a las 2:13
  • @PabloContreras tienes razón colega, ya lo corregí... Es que una de mis dudas también tenia que ver con eso. Gracias por hacérmelo notar Commented el 21 abr. 2017 a las 4:48
  • Ok hermano, tranquilo de nada, para eso estamos :D
    – bypabloc_
    Commented el 21 abr. 2017 a las 5:07

2 respuestas 2

4

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.

1
  • Solución correcta, gracias colega Commented el 20 abr. 2017 a las 23:02
0

tu código funciona perfectamente solo que al final agregas por error 2 comillas: "...-1-TRATAMIENTO-1"\" >ELIMINAR..." aquí te dejo tu código con una pequeña modificación en el literal asignado a x:

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

$(".boton-eliminar-tratamiento").click(function(){
    alert('Ha hecho click sobre el boton'); 
    return true; 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="p-tratamientos"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.