jQuery / Método / .click() - Executar ações ao clicar

No jQuery, .click(handler) registra uma função para o clique, enquanto .click() sem argumento aciona o evento. Em código novo, registre com .on("click", handler) e acione com .trigger("click"). Delegue a um pai persistente para atender também botões incluídos depois.

Separar registro e acionamento na migração

A documentação de .click() marca a API como obsoleta desde o jQuery 3.3. Isso não significa removida: a comparação entre as formas funcionou em 3.7.1 e 4.0.0. O código novo segue as alternativas documentadas .on() e .trigger().

handler é a função executada no evento. Passe sua referência, sem chamar handler() imediatamente. O registro direto exige elementos existentes; o exemplo escolhe um pai persistente após a preparação do documento.

Exemplo completo de clique, acionamento e remoção

Salve todo o código em UTF-8 como click-demo.html e abra no navegador. Não é necessário instalar nada, mas é preciso internet para carregar o arquivo oficial do jQuery pela rede de distribuição de conteúdo, ou CDN. Usa 4.0.0. Cliques, inclusão, novo registro, remoção e restauração foram executados com 3.7.1 e 4.0.0.

Alpha e o futuro Beta são os botões contados. Os demais controlam o exercício. Cada acionamento mostra o nome, incrementa o total e alterna o destaque. Todos têm type="button" para evitar enviar acidentalmente um formulário que os contenha.

<!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>

Inicialmente, Handler mostra enabled e o resultado é:

last=none | clicks=0

1. Alpha produz last=Alpha | clicks=1 e destaque. Trigger Alpha aciona o mesmo botão por código: o total passa a 2 e o destaque é removido.
2. Add Beta e depois Beta produzem last=Beta | clicks=3. Conferir o ID second impede duplicatas.
3. Use várias vezes Enable or rebind e uma vez Alpha: o total passa a 4. O registro repetido não multiplica o incremento.
4. Stop demo handler mostra stopped. Os botões de tarefa deixam de alterar o contador e o destaque do exercício. Enable or rebind retoma o funcionamento.
5. Reset remove Beta e o destaque de Alpha, zera o contador e ativa o manipulador. Alpha volta a começar em 1.

Botões dinâmicos, this e event.target

A delegação com .on() registra em #items e trata cliques dos descendentes .item. Usa a propagação aos pais, chamada bubbling; Beta não precisa de novo registro. Um código que interrompa a propagação pode impedir o evento de alcançar o manipulador delegado.

Na função comum handleClick, this corresponde ao botão que satisfaz .item. Ao clicar no span de Alpha, event.target pode ser span, mas this continua sendo o botão e permite mudar sua classe inteira. Não substitua essa função por uma arrow function sem considerar this. Botões nativos também permitem ativação por Enter depois de receberem foco.

Remover apenas o manipulador necessário

.off() recebe o namespace do evento e o mesmo seletor delegado para retirar o tratamento do exercício. Em click.demo, click é o tipo e demo identifica o grupo. .off("click.demo", ".item") antes do registro mantém uma execução após repetir Enable or rebind.

Um .off() sem argumentos no pai pode remover manipuladores de outras funções. Limite o escopo. Reset limpa apenas o item acrescentado, o destaque e o contador do exercício antes de ativar seu manipulador novamente.

Comparar .click() antigo e seu substituto

Execute este trecho no console de desenvolvimento. Dois botões temporários, sem inserção na página, comparam as formas. Cada um executa uma 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() executa o processamento registrado e pode se propagar. Não reproduz perfeitamente uma ação real; não suponha equivalência em operações que exigem ativação do usuário no navegador. O exercício compara apenas contador e classes de botões comuns.

Se não responder, confira jQuery em Network, erros e versão em Console, os seletores, a existência do pai ao registrar e Stop. Se um clique causar várias execuções, examine a inicialização repetida e o escopo de remoção.