jQuery Events: Click, Hover, Submit & Delegation Explained

jQuery's event API is friendly, consistent across browsers, and — the real killer feature — great for handling dynamic content. On the Laravel admin panels I maintain, event delegation with .on() is what lets me add rows to a table and have them 'just work' without re-binding handlers every time. Here's every pattern you'll actually use in 90% of real projects, in the order I reach for them.

1. Click and other basic events

$("#btn").on("click", function () {
  $(this).toggleClass("active");
});

// Multiple events at once
$("input").on("focus blur", function () {
  $(this).toggleClass("focused");
});

Note the classic function() vs arrow: only classic functions get their own this bound to the element. If you use an arrow function, this stays whatever it was in the enclosing scope — usually not what you want inside a handler.

2. Hover — a shortcut for mouseenter/mouseleave

$(".card").hover(
  function () { $(this).addClass("hover"); },
  function () { $(this).removeClass("hover"); }
);

3. Form submit with AJAX

$("form").on("submit", function (e) {
  e.preventDefault();
  const $form = $(this);
  const data = $form.serialize();

  $.post($form.attr("action"), data)
    .done(res => alert("Saved!"))
    .fail(err => alert("Error: " + err.statusText));
});

4. Event delegation — the pattern that changes everything

This is the number one reason jQuery is still worth learning. Attach the handler to a parent that always exists, then filter by a child selector. It works for elements added to the DOM later — no re-binding needed.

// Works even for .item elements added by AJAX later
$("#list").on("click", ".item .delete-btn", function () {
  $(this).closest(".item").remove();
});

// Bad — only binds to items that exist right now
$(".item .delete-btn").on("click", function () { … });

5. Common event objects and helpers

$("form").on("submit", function (e) {
  e.preventDefault();     // stop default behaviour
  e.stopPropagation();    // don't bubble up
  console.log(e.type);    // "submit"
  console.log(e.target);  // element that triggered
  console.log(this);      // element the handler was bound to
});

6. Keyboard events

$(document).on("keydown", function (e) {
  if (e.key === "Escape") $(".modal").hide();
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    save();
  }
});

7. One-time handlers with .one()

$("#tour-start").one("click", () => showOnboarding());
// fires exactly once, then unbinds itself

8. Removing handlers

$("#btn").off("click");                 // remove all click handlers
$("#list").off("click", ".item");       // remove one delegated handler
$("#btn").off();                        // remove every handler

9. Triggering events programmatically

$("#btn").trigger("click");
$("form").trigger("submit");

// Custom events — great for decoupled code
$(document).on("cart:updated", (e, count) => console.log(count));
$(document).trigger("cart:updated", [3]);

10. Namespacing — the debugging superpower

$("#btn").on("click.myWidget", handler1);
$("#btn").on("click.myWidget", handler2);

// Remove only your widget's handlers, leave others alone
$("#btn").off(".myWidget");