jQuery Click Event

The click event runs when the user activates an element with a mouse, trackpad, touch interaction, or another compatible pointer action.

Use .on("click", handler) for current jQuery code.

Syntax Top ↑

$( "element" ).on( "click", function (event) {
    // Code to run after the click.
});

Button Markup Top ↑

<input type="button" value="Click me" id="b1">
<div id="t1"></div>

Handle a Button Click Top ↑

$( function () {
    $( "#b1" ).on( "click", function () {
        $( "#t1" ).text( "You clicked the button" );
    });
});

Open the click-event demo →

One Handler for a Class of Buttons Top ↑

$( ".edit_class" ).on( "click", function () {
    // One handler works for every element with this class.
});

Find Which Element Was Clicked Top ↑

$( ".edit_class" ).on( "click", function () {
    const id = this.id;
    console.log( "Clicked ID:", id );
});

Click Event for Radio Buttons Top ↑

$( 'input:radio[name="options"]' ).on( "click", function () {
    const value = $( this ).val();
    $( "#result" ).text( "Selected: " + value );
});

See also jQuery radio-button examples.

Click and Double-Click Together Top ↑

$( "#b1" ).on( "click dblclick", function () {
    // Runs for either event.
});

$( "#b1" ).on( "click dblclick", function (event) {
    $( "#t1" ).text( "Event type: " + event.type );
});

Learn the double-click event →

Click Handler for Dynamically Added Content Top ↑

$( "#display_body" ).on( "click", ".edit_class", function () {
    const id = this.id;
    console.log( "Dynamic button clicked:", id );
});

This delegated pattern is useful when content is inserted later, for example after an AJAX load().

Back to jQuery Events · jQuery Tutorials Home

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: