jQuery on() and off() Methods

The on() method is the modern, recommended way to attach events in jQuery. The off() method removes those events when you no longer need them. Together, they give you full control over event management.

Why on() Was Introduced

Older jQuery had separate methods for events — bind(), live(), delegate(). These were replaced in jQuery 1.7 with the single, unified on() method. The on() method handles all three cases: direct binding, event delegation, and multiple events.

Basic Syntax of on()

// Single event
$(selector).on(event, function);

// With event delegation
$(parent).on(event, childSelector, function);

// Multiple events, same handler
$(selector).on("click mouseenter", function);

// Multiple events, different handlers
$(selector).on({
    click: function() { ... },
    mouseenter: function() { ... },
    mouseleave: function() { ... }
});

Direct Event Binding with on()

$(document).ready(function() {
    $("#myBtn").on("click", function() {
        alert("Button clicked!");
    });
});

This is equivalent to $("#myBtn").click(function() { ... }). The on() version is preferred in modern jQuery code.

Multiple Events with Same Handler

$(document).ready(function() {
    $("input").on("focus blur", function() {
        $(this).toggleClass("active-field");
    });
});

The same function runs when the input gains focus and when it loses focus. The class toggles both times.

Multiple Events with Different Handlers

$(document).ready(function() {
    $(".box").on({
        mouseenter: function() {
            $(this).css("background", "#e3f2fd");
        },
        mouseleave: function() {
            $(this).css("background", "");
        },
        click: function() {
            $(this).toggleClass("selected");
        }
    });
});

Diagram: on() with Object Syntax

  $(".box").on({
      mouseenter → background changes to light blue
      mouseleave → background resets
      click      → "selected" class toggles on/off
  })

Event Delegation with on()

$(document).ready(function() {
    // Attach to parent, listen for child clicks
    $("#commentList").on("click", ".reply-btn", function() {
        var commentId = $(this).data("id");
        $("#replyForm").show().data("target", commentId);
    });
});

Even if new comments are loaded via AJAX, the reply button on each comment works — because the listener is on the parent list.

Passing Data into the Event Handler

The on() method accepts an optional data object that you can access inside the handler via event.data.

$(document).ready(function() {
    var config = { color: "green", size: "18px" };

    $("p").on("click", config, function(event) {
        $(this).css("color", event.data.color);
        $(this).css("font-size", event.data.size);
    });
});

The off() Method — Removing Events

The off() method removes event listeners that were attached using on(). This is useful when you want to temporarily disable an interaction or clean up before removing an element from the DOM.

Syntax

$(selector).off();                   // remove all events from selector
$(selector).off("click");            // remove only click events
$(selector).off("click", handler);   // remove only a specific click handler

off() Practical Example

$(document).ready(function() {
    function handleClick() {
        alert("Clicked!");
    }

    // Attach event
    $("#alertBtn").on("click", handleClick);

    // Remove event when disable button is clicked
    $("#disableBtn").on("click", function() {
        $("#alertBtn").off("click", handleClick);
        $(this).text("Alert button disabled");
    });
});

Diagram: on() and off() Lifecycle

  Page loads
       │
  on() → event attached to element
       │
  User interacts → event handler runs
       │
  off() → event removed from element
       │
  User interacts → nothing happens (event gone)

One-Time Event with one()

If you need an event to fire only once and then automatically remove itself, use one() instead of on().

$(document).ready(function() {
    $("#startTour").one("click", function() {
        startWebsiteTour();
        // The click listener is automatically removed after this runs
    });
});

Namespace Events — More Control with off()

You can give events a namespace (a label) so you can remove only specific groups of events later.

// Attach with namespace
$("body").on("click.myPlugin", function() { ... });

// Later, remove only the namespaced events
$("body").off("click.myPlugin");
// Other click events on body remain untouched

Quick Summary

• on() is the modern way to attach events — replaces bind(), live(), delegate().
• Attach multiple events at once using a space-separated string or an object.
• Use on(parent, childSelector, fn) for event delegation.
• off() removes events — all events, a specific event type, or a specific handler.
• Use one() when you want the event to fire only once automatically.
• Namespaces let you target specific event groups for removal.