jQuery / Método / .click() - Ejecutar acciones al hacer clic

En jQuery, .click(handler) registra una función para el clic, mientras que .click() sin argumento activa ese evento. En código nuevo, registra con .on("click", handler) y activa con .trigger("click"). Delega en un padre persistente para tratar también botones añadidos después.

Separar registro y activación al migrar

La documentación de .click() marca la API como obsoleta desde jQuery 3.3. No significa eliminada: la comparación de ambas formas funcionó en 3.7.1 y 4.0.0. El código nuevo sigue las alternativas documentadas .on() y .trigger().

handler es la función que se ejecuta al ocurrir el evento. Pasa su referencia en vez de llamar a handler() inmediatamente. El registro directo requiere que existan los elementos; el ejemplo elige un padre persistente cuando el documento está preparado.

Ejemplo completo de clics, activación y eliminación

Guarda todo el código en UTF-8 como click-demo.html y ábrelo en el navegador. No requiere instalación, pero sí internet para cargar el archivo oficial de jQuery desde su red de distribución de contenidos, o CDN. Usa 4.0.0. Clics, adición, nuevo registro, eliminación y restablecimiento se ejecutaron con 3.7.1 y 4.0.0.

Alpha y el futuro Beta son los botones contados. Los demás controlan el ejercicio. Cada activación muestra el nombre, incrementa el total y alterna el resaltado. Todos tienen type="button" para evitar enviar accidentalmente un formulario que los contenga.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Click handlers and delegated events</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    button { padding: 10px; margin: 4px; }
    .item.selected { outline: 3px solid #b66b00; background: #fff3cf; }
    #items { border: 1px solid #ccc; padding: 12px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Click handlers and delegated events</h1>
  <div id="items">
    <button type="button" class="item" id="first"><span>Alpha</span></button>
  </div>
  <button type="button" id="add">Add Beta</button>
  <button type="button" id="trigger">Trigger Alpha</button>
  <button type="button" id="bind">Enable or rebind</button>
  <button type="button" id="stop">Stop demo handler</button>
  <button type="button" id="reset">Reset</button>
  <p>Handler: <span id="status"></span></p>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      let clicks = 0;
      let last = "none";
      function render() {
        $("#result").text(`last=${last} | clicks=${clicks}`);
      }
      function handleClick(event) {
        clicks++;
        last = $(this).text();
        $(this).toggleClass("selected");
        render();
      }
      function bind() {
        $("#items").off("click.demo", ".item")
          .on("click.demo", ".item", handleClick);
        $("#status").text("enabled");
      }
      $("#add").on("click", function () {
        if (!$("#second").length) {
          $("<button>").attr({ type: "button", id: "second" })
            .addClass("item").text("Beta").appendTo("#items");
        }
      });
      $("#trigger").on("click", () => $("#first").trigger("click"));
      $("#bind").on("click", bind);
      $("#stop").on("click", function () {
        $("#items").off("click.demo", ".item");
        $("#status").text("stopped");
      });
      $("#reset").on("click", function () {
        $("#second").remove();
        $("#first").removeClass("selected");
        clicks = 0;
        last = "none";
        bind();
        render();
      });
      bind();
      render();
    });
  </script>
</body>
</html>

Al principio Handler muestra enabled y el resultado es:

last=none | clicks=0

1. Alpha produce last=Alpha | clicks=1 y un resaltado. Trigger Alpha activa el mismo botón desde código: el total pasa a 2 y se quita el resaltado.
2. Add Beta y después Beta producen last=Beta | clicks=3. Comprobar el ID second evita duplicados.
3. Pulsa varias veces Enable or rebind y una vez Alpha: el total pasa a 4. El registro repetido no multiplica el incremento.
4. Stop demo handler muestra stopped. Los botones de tarea dejan de cambiar el contador y el resaltado del ejercicio. Enable or rebind reanuda el funcionamiento.
5. Reset quita Beta y el resaltado de Alpha, pone el contador en cero y activa el manejador. Alpha vuelve a empezar en 1.

Botones dinámicos, this y event.target

La delegación con .on() registra en #items y trata los clics de sus descendientes .item. Usa la propagación hacia los padres, llamada bubbling; Beta no necesita otro registro. Un código que detenga la propagación puede impedir que el evento alcance el manejador delegado.

En la función normal handleClick, this corresponde al botón que cumple .item. Al pulsar el span de Alpha, event.target puede ser span, pero this sigue siendo el botón y permite cambiar su clase completa. No sustituyas sin más esta función por una flecha cuando uses this. Los botones nativos también permiten activación con Intro después de enfocarlos.

Eliminar solo el manejador necesario

.off() recibe el espacio de nombres del evento y el mismo selector delegado para retirar el manejo del ejercicio. En click.demo, click es el tipo de evento y demo identifica el grupo. .off("click.demo", ".item") antes del registro mantiene una sola ejecución tras repetir Enable or rebind.

Un .off() sin argumentos sobre el padre puede retirar manejadores de otras funciones. Delimita la eliminación. Reset limpia solo el elemento añadido, el resaltado y el contador del ejercicio antes de volver a activar su manejador.

Comparar .click() antiguo y su sustituto

Ejecuta este fragmento en la consola de desarrollo. Dos botones temporales sin insertar en la página comparan ambas formas. Cada uno se ejecuta una vez:

let legacy = 0;
const $old = $("<button>").click(() => legacy++);
$old.click();
console.log(legacy);
let modern = 0;
$("<button>").on("click", () => modern++).trigger("click");
console.log(modern);

1
1

.trigger() ejecuta el procesamiento registrado y puede propagarse. No reproduce perfectamente una acción real; no supongas equivalencia para operaciones que requieren activación del usuario en el navegador. El ejercicio compara solo contador y clases de botones normales.

Si no responde, revisa jQuery en Network, errores y versión en Console, los selectores, la existencia del padre al registrar y Stop. Si un clic causa varias ejecuciones, revisa la inicialización repetida y el ámbito de eliminación.