JQuery – Trigger – Como ejecutar un click en botón o enlace con javascript

En muchos ocasiones nos puede interesar simular el click de un usuario sobre un enlace. Dicho de otro modo, provocar el click en un enlace sin que sea el usuario quien lo haga.

Pongamos un ejemplo muy común: las ventanas modal (ventanas emergentes) con plugins de jquery. En la mayoría de casos al clicar sobre un enlace, se abre una ventana Modal. Veamos cómo se estructura:

Aquí tenemos el código html de nuestra venta modal:

1
2
3
4
// Código dentro del body
<div class="ventanamodal" id="modal-aviso">
  Contenido de la ventana modal
</div>

Aparte, tenemos un enlace que al clicar hace abrir la ventana:

1
<a href="#modal-aviso" id="btn_modal">Abrir ventana modal</a>

En este caso, cuando el usuario hace clic en el enlace, la ventana modal se muestra. Pero podemos provocar con jquery que la ventana se muestre sin que el usuario haga el clic? La respuesta es sí. Con el siguiente código, provocamos la acción de click sobre el enlace. Simula que el usuario hace clic sobre el enlace:

1
$("#btn_modal").trigger("click");

Fijaos bien en los Id de todos los objetos de los códigos. Debéis quedaros con la última función que es la que obliga a hacer el clic del enlace, el resto sólo es un ejemplo de uso.

Más información

Artículos relacionados

Validar un formulario con jQuery antes de enviarlo Una de las funciones que le dan un perfil mas profesional a nuestra web, es la validación de los formularios, antes de enviarlos. Una opción es enviar...
jQuery Plugin MiniJS Notification – Muestra ... Os facilito un enlace a un magnífico plugin que os facilitará la tarea de poner mensajes en vuestra web o aplicación. Un ejemplo claro, sería la oblig...
jQuery – Capturar valor de desplegable y esc... Estrenando nuestro perfil de CodePen.io, vamos a ver un ejemplo en jQuery que trabaja con desplegables (selects) y cajas de texto en formularios. En m...
jQuery datepicker, php, mysql y las fechas en form... Veamos un caso particular a la hora de programar con jquery ui. El componente DatePicker nos proporciona una manera muy visual y eficiente de insertar...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*