jQuery Click Event

What You’ll Learn

The click event fires when the user presses and releases the mouse button inside an element. This tutorial covers binding with .on("click"), passing eventData, triggering with .trigger("click"), comparing click with mousedown and mouseup, and event delegation for dynamic content.

Introduction

Almost every interactive web page responds to clicks — buttons submit forms, tabs switch panels, and list items toggle state. jQuery makes binding click handlers straightforward: select elements, call .on("click", handler), and run your function when the user completes a full press-and-release inside the element.

The official jQuery API distinguishes the click event (bound with .on("click") since 1.7) from the deprecated .click() method used for binding in older code. To programmatically fire a handler, use .trigger("click") — available since jQuery 1.0. Any HTML element can receive the click event.

Understanding the click Event

The click event is sent to an element when the mouse pointer is over the element and the mouse button is pressed and released. jQuery normalizes this across browsers and gives you a consistent event object with properties like event.target, event.pageX, and event.preventDefault().

Click fires only after this exact sequence: the mouse button is depressed while the pointer is inside the element, then released while the pointer is still inside. If the user presses inside but releases outside, no click fires on that element. When you need action on press or release alone — not the full gesture — mousedown or mouseup may be more suitable.

📝 Syntax

The modern jQuery API for the click event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("click" [, eventData ], handler) (since 1.7)

.on( "click" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called each time click fires: function( event ) { ... }.

2. Event delegation — .on("click", selector, handler)

$( "#list" ).on( "click", "li", function( event ) {
  // runs when any li inside #list is clicked
} );

3. Trigger the event — .trigger("click") (since 1.0)

.trigger( "click" )

• Runs bound click handlers and default browser actions (e.g. following a link).
• Use .triggerHandler("click") to run handlers without default actions.

4. Unbind — .off("click" [, selector] [, handler])

$( "#target" ).off( "click" );           // remove all click handlers
$( "#list" ).off( "click", "li", fn );   // remove delegated handler

Official jQuery API examples

$( "#target" ).on( "click", function() {
  alert( "Handler for `click` called." );
} );

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "click" );
} );

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Examples 1–4 follow the official jQuery API documentation. Example 5 demonstrates event delegation for dynamic lists. Use the Try-it links to run each snippet in the browser.

$( "#target" ).on( "click", function() {
  alert( "Handler for `click` called." );
} );

User clicks #target → alert: "Handler for click called."

Handler runs once per full click (mousedown + mouseup inside)

$( "#target" ).on( "click", function() {
  alert( "Handler for `click` called." );
} );

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "click" );
} );

Click #target directly → alert runs

Click #other → $("#target").trigger("click") → same alert


Programmatic trigger invokes bound handlers

$( "p" ).on( "click", function() {
  $( this ).slideUp();
} );

Click "First Paragraph" → slides up and hides

Click "Second Paragraph" → same animation on that p only

$(this) refers to the clicked paragraph

$( "p" ).trigger( "click" );

After handlers are bound on each p:

$("p").trigger("click") → every handler runs once

Useful for batch actions or testing

$( "#list" ).on( "click", "li", function() {
  $( this ).toggleClass( "done" );
} );

Click existing li → toggles .done class

Append new li via JavaScript → click still works


One handler on #list covers all li children

🚀 Common Use Cases

• Button actions — $("#submit").on("click", fn) to validate forms or send AJAX requests.
• Dismissible alerts — $(".alert .close").on("click", function(){ $(this).parent().fadeOut(); }).
• Tab navigation — click handlers swap visible panels and update active classes.
• Todo lists — delegated $("#tasks").on("click", "li", fn) for items added at runtime.
• Proxy triggers — $("#shortcut").on("click", function(){ $("#real-btn").trigger("click"); }).
• EventData labels — $(".star").on("click", { rating: 5 }, fn) to pass metadata without closures.

📝 Notes

• Bind with .on("click", handler) since jQuery 1.7 — not the deprecated .click(handler) method.
• Trigger with .trigger("click") since jQuery 1.0.
• Click requires mousedown and mouseup both inside the element — release outside cancels click.
• Any HTML element can receive the click event — not limited to <button> or <a>.
• Use .off("click") to remove handlers — avoid deprecated .unbind("click").
• Touch devices synthesize click after tap — there may be a ~300ms delay on older mobile browsers.
• For keyboard accessibility, ensure clickable non-button elements have role="button" and tabindex="0".

💡 Best Practices