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 corresponding element is clicked. Similarly, this function can be used to perform other tasks you need, such as:

• Changing element properties with jQuery.addClass()
• Triggering other events
• Loading content via AJAX with jQuery.ajax()

jQuery.click() can also be effectively 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 information about syntax and selectors.

What is the difference between jQuery.click() and .onClick?

The main difference 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 JavaScript DOM API. It is used directly on the DOM element and requires the specification 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 difference is that the jQuery.click() function provides certain benefits beyond the native .onClick method. These include simplification of code writing, improved browser compatibility, and the ability to respond to dynamically 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.");
});