Lessons in this course (10)
4. Events and event delegation
Basic★ Must knowLesson 4 of 10
js
$("#save").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true); // 'this' = the DOM element
});
// Delegation: handler on a static parent, works for rows added later
$("#ordersTable").on("click", ".delete-btn", function () {
const id = $(this).closest("tr").data("id");
deleteOrder(id);
});
$("#search").on("input", debounce(function () { search($(this).val()); }, 300));
$("#name").on("keyup change", handler); // multiple events
$("#btn").one("click", handler); // runs once
$("#btn").off("click"); // remove handlers
$(".item").on("click.analytics", track); // namespaced event
$(".item").off(".analytics"); // remove only namespaced handlers
$("#form").trigger("submit"); // trigger programmaticallyOld APIs: .bind(), .delegate(), .live() (removed in 1.9) → all replaced by .on(). return false in a jQuery handler = preventDefault() + stopPropagation().