? jQuery on() & off()

? Quick Overview

The on() and off() methods in jQuery are used to attach and remove event handlers. They are the modern and recommended way to handle events, replacing older methods like .click(), .bind(), and .unbind().

? Key Concepts

• on() attaches one or more events to elements
• off() removes previously attached events
• Supports multiple events at once
• Works with event delegation
• Helps avoid memory leaks

? Syntax / Theory

Basic Syntax:

// Attaching an event using on()
$(selector).on(event, function);

// Removing an event using off()
$(selector).off(event);

? Code Example(s)

// Attach and remove click event using on() and off()
$("#btnOn").on("click", function(){
alert("Button Clicked");
});

$("#btnOff").on("click", function(){
$("#btnOn").off("click");
});

? Live Output / Explanation

? Interactive Example

Try clicking the buttons below to understand how events are attached and removed dynamically.

// Interactive demo using on() and off()
$("#demoOn").on("click", function(){
  $(this).text("Clicked!");
});

$("#demoOff").on("click", function(){
  $("#demoOn").off("click");
  $("#demoOn").text("Click Disabled ?");
});

? Use Cases

• Dynamic elements loaded after page load
• Event delegation in lists and tables
• Enabling and disabling user interactions
• Improving performance by managing events