How to use jQuery.click() to capture click events on elements

Instead of writing complex event handlers, you can easily link functions to click events on HTML elements using jQuery.click(). Doing so will make the source code more compact and clearer.

What is the jQuery.click() method?

By applying the jQuery.click() method to a specific HTML element and passing a function as an argument, the method will be called-up when the cor­res­pond­ing element is clicked. Similarly, this function can be used to perform other tasks you need, such as:

• Changing element prop­er­ties with jQuery.addClass()
• Trig­ger­ing other events
• Loading content via AJAX with jQuery.ajax()

jQuery.click() can also be ef­fect­ively combined with looping functions like jQuery.each().

What is the syntax of the jQuery.click() method?

The syntax of jQuery.click() is as follows:

$(selector).click(function);

function in this case is an optional parameter that is executed when a click event occurs.

If you want to brush up your basic jQuery knowledge, you can take a look at our jQuery tutorial. There you’ll find all the in­form­a­tion about syntax and selectors.

What is the dif­fer­ence between jQuery.click() and .onClick?

The main dif­fer­ence between jQuery.click and .onClick is that jQuery.click() is a jQuery library method, whereas .onClick is an event handler, and thus part of the native JavaS­cript DOM API. It is used directly on the DOM element and requires the spe­cific­a­tion of a function to be called on an event. The syntax takes the form of element.onClick = handler, by which element is the DOM element and handler is the function that will be carried out on a click-event.

Another dif­fer­ence is that the jQuery.click() function provides certain benefits beyond the native .onClick method. These include sim­pli­fic­a­tion of code writing, improved browser com­pat­ib­il­ity, and the ability to respond to dy­nam­ic­ally added elements.

An example of how to use jQuery.click()

The following click-event jQuery.click() button causes a popup window to appear with the text The button was clicked when the element is clicked.

$("button").click(function(){
    alert("The button was clicked.");
});