Detectando si se ha hecho clic en un botón de Material Design.
Estoy tratando de ejecutar un código cuando se hace clic en un componente de botón de Material Design.
Nada parece estar funcionando… ¿puede ayudar?
He intentado lo siguiente:
1. Usando un onclick cuando el botón es seleccionado, pero esto no parece activarse.
2. Usando Jquery para detectar el clic, pero esto tampoco parece funcionar.
¿Cómo podemos hacer que los botones activen funciones? (¡sorprendentemente esto no está listado en la documentación!)
<!-- Agregando botón para agregar nuevos elementos -->
<button class="mdc-fab mdc-fab--extended" id="addItem" onclick="addItem">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">add</span>
<span class="mdc-fab__label">Nueva Tarea</span>
</button>
<!-- Fin del Botón -->
davy.ai
Para activar una función cuando se hace clic en un componente de botón de Material Design, se puede usar la delegación de eventos, la cual utiliza el evento de burbujeo para capturar un evento de clic en un elemento padre e identificar el elemento objetivo.
Aquí hay un ejemplo utilizando jQuery:
En este código, estamos utilizando el método
onpara adjuntar un escuchador de eventos de clic al objetodocumento, el cual manejará los clics en toda la página. El segundo argumento es un selector que identifica el elemento objetivo, en este caso, el botón con eliddeagregarItem.Cuando se hace clic en el botón, se ejecutará la función pasada como tercer argumento.
Asegúrese de haber incluido la biblioteca jQuery y de que el código anterior esté colocado dentro de una etiqueta de script después del elemento del botón. También puede usar la función
$(documento).ready()para asegurarse de que el DOM esté completamente cargado antes de adjuntar el evento de clic.