jQuery / Méthode / .click() - Exécuter une action au clic

Dans jQuery, .click(handler) enregistre une fonction à exécuter au clic, tandis que .click() sans argument déclenche cet événement. Dans du nouveau code, utilisez .on("click", handler) pour enregistrer et .trigger("click") pour déclencher. Déléguez à un parent conservé pour traiter aussi les boutons ajoutés plus tard.

Séparer enregistrement et déclenchement

La documentation de .click() indique une dépréciation depuis jQuery 3.3. Ce n'est pas une suppression : la comparaison des formes a fonctionné en 3.7.1 et 4.0.0. Le nouveau code suit néanmoins les alternatives documentées .on() et .trigger().

handler est la fonction appelée à l'événement. Passez sa référence au lieu d'exécuter handler() immédiatement. Une liaison directe exige des éléments présents au moment de .on() ; l'exemple choisit un parent conservé après préparation du document.

Exemple complet : clic, déclenchement et retrait

Enregistrez tout le code en UTF-8 dans click-demo.html et ouvrez-le dans un navigateur. Aucune installation n'est nécessaire ; internet charge le fichier officiel jQuery par son réseau de diffusion de contenu, ou CDN. Le code utilise 4.0.0. Clic, ajout, réenregistrement, retrait et réinitialisation ont été exécutés avec 3.7.1 et 4.0.0.

Alpha et le futur Beta sont les boutons comptés. Les autres contrôlent l'exercice. Chaque activation affiche le nom, incrémente le total et inverse le surlignage. Tous portent type="button" pour éviter une soumission involontaire si on les place dans un formulaire.

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

Au départ, Handler indique enabled et le résultat est :

last=none | clicks=0

1. Alpha donne last=Alpha | clicks=1 et un surlignage. Trigger Alpha active ce bouton depuis le code : le total passe à 2 et le surlignage disparaît.
2. Add Beta, puis Beta, donnent last=Beta | clicks=3. La vérification de l'identifiant second évite les doublons.
3. Appuyez plusieurs fois sur Enable or rebind, puis une fois sur Alpha : le total devient 4. L'enregistrement répété ne multiplie pas l'incrément.
4. Stop demo handler affiche stopped. Les boutons de tâche ne changent plus le compteur ni les marques de l'exercice. Enable or rebind les réactive.
5. Reset enlève Beta et la marque d'Alpha, remet le compteur à zéro et active le gestionnaire. Alpha repart ensuite de 1.

Boutons dynamiques, this et event.target

La délégation avec .on() enregistre sur #items et traite les clics de ses descendants .item. Elle utilise la remontée des événements vers les parents, dite bubbling ; Beta n'exige donc pas de nouvelle liaison. Un code arrêtant cette propagation peut empêcher d'atteindre le gestionnaire délégué.

Dans la fonction ordinaire handleClick, this désigne le bouton correspondant à .item. Cliquer sur le span d'Alpha peut donner ce span comme event.target, mais this reste le bouton. On peut ainsi changer la classe du bouton entier. Ne remplacez pas machinalement cette fonction par une fonction fléchée si vous utilisez this. Les boutons natifs permettent aussi l'activation par Entrée après prise de focus.

Retirer seulement le gestionnaire voulu

.off() reçoit l'espace de noms de l'événement et le même sélecteur délégué pour retirer seulement le traitement de l'exercice. Dans click.demo, click est le type et demo identifie le groupe. .off("click.demo", ".item") avant la liaison garantit un seul appel après plusieurs Enable or rebind.

Un .off() sans arguments sur le parent peut retirer les gestionnaires d'autres fonctions. Limitez sa portée. Reset ne nettoie que l'élément ajouté, le surlignage et le compteur de l'exercice avant de réactiver son gestionnaire.

Comparer l'ancien .click() et son remplacement

Exécutez ce fragment dans la console de développement. Deux boutons temporaires, non insérés dans la page, comparent les formes. Chacun s'exécute une fois :

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() exécute le traitement enregistré et peut remonter dans l'arbre. Il ne reproduit pas parfaitement une action réelle : ne supposez pas une équivalence pour les fonctions exigeant une activation utilisateur du navigateur. L'exercice compare uniquement compteur et classes de boutons ordinaires.

Sans réaction, vérifiez jQuery dans Network, erreurs et version dans Console, les sélecteurs, l'existence du parent à l'enregistrement et Stop. Plusieurs appels pour un clic imposent de revoir l'initialisation répétée et la portée du retrait.