jQuery Events: Click, Hover, Submit & Delegation Explained

jQuery's event API is friendly, consistent across browsers, and great for handling dynamic content. Here's everything you need to handle events confidently.

Click and hover

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

$(".card").hover(
  () => $(this).addClass("hover"),
  () => $(this).removeClass("hover")
);

Form submit

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

Event delegation (critical for dynamic content)

// Works even for items added later
$("#list").on("click", ".item", function () {
  $(this).remove();
});