Click Event Jquery

Que tal amigos, en este post veremos el evento click en jQuery el cual nos puede ser útil si deseamos agregar funcionalidad a algún elemento y que al dar clic sobre éste se dispare alguna acción en nuestra página web. Para ejemplo vamos a crear una estructura básica de HTML.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Evento click en jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
  <button id="btnClick">Soy un botón</button>
</body>
</html>

En el código anterior podemos observar que hemos creado un botón con id btnClick, Ahora procederemos a agregar la funcionanlidad.

/*
 * Para interactuar de manera segura con nuestra página nos aseguramos que esta
 * acción se realiza una vez que se cargó por completo la página
 */
$(function(){
  //Añadimos el evento a nuestro botón
  $("#btnClick").click(function(){
    // Aquí colocaremos el código que deseamos ejecutar una vez disparado el evento
    alert("Haz hecho click sobre el botón");
  });
});

Ahora haremos lo mismo pero a travez de una clase, prácticamente es el mismo procedimiento, veamos el ejemplo:

<!DOCTYPE html>
<html>
...
<body>
  <button class="btn">Soy un botón con una clase</button>
</body>
</html>

Podemos entonces crear nuestro script para de igual forma capturar el evento click

/* De igual forma nos aseguramos de que se cargó la página*/
$(function(){
  //Añadimos el evento a nuestro botón mediante la clase "btn"
  $(".btn").click(function(){
    // Aquí colocaremos el código que deseamos ejecutar una vez disparado el evento
    alert("Haz hecho click sobre el botón");
  });
});

Por último debemos integrar el script a nuestro archivo html, podemos hacer esto de dos formas, ya sea a través de un archivo .js o directamente en nuestro código html. Para este caso lo integramos directamente en nuestro código html y quedaría de la siguiente manera (en el caso de utilizar el id del elemento para acceder a él):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Evento click en jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </script>
</head>
<body>
  <button id="btnClick">Soy un botón</button>
  <script type="text/javascript">
    $(function(){
      //Añadimos el evento a nuestro botón
      $("#btnClick").click(function(){
        // Aquí colocaremos el código que deseamos ejecutar una vez disparado el evento
        alert("Haz hecho click sobre el botón");
      });
    });
  </script>
</body>
</html>