Trigger an Event Using the jQuery click() method

What is the most common action we take when visiting a website? A mouse click! Clicking is one of the most important actions to a website or app. You do so when navigating through a website and adding products to a cart.

Wouldn’t it be great if we could tell when a user clicks a specific element on the page? We could then build the experience around this behavior.

Enter the jQuery click() method. We can trigger an event when the user clicks the mouse in just a couple of lines of code. This method is called on a jQuery selector and takes a callback function as an argument. The callback function will execute each time the click() method detects a mouse click event.

Using jQuery click()

We are going to render a HTML button and add text to the page when the button is clicked in the example below. The click() method can be attached to any element on the page, but it is most common to attach it to a button:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
  <button id="btn-primary">
  Click Me!
</button>
 <p class="new-content">
  
  </p>
</div>

The above code renders a basic button with an id of “btn-primary” inside a <div> with an id of “main.” The goal of this example is to display new content in the <p> tag with a class of “new-content” after the button is clicked. 

Enclose our jQuery inside of <script> tags and we have the following code:

<script>
  $('#btn-primary').click(() => {
    $('.new-content').html("Button Clicked!")
  })
</script>

Now we have the click() method attached to the button’s id and taking a callback function as an argument. The callback function is an anonymous function that returns the string “Button Clicked!” as the HTML inside the <p> tag. Before we see what the above code renders, let’s review what an anonymous function is.

An anonymous function is simply a function without a name. Common uses for anonymous functions are as callbacks as arguments of a method. Callback methods and anonymous functions are the cornerstones of building responsive websites and apps. 

Now that we’ve reviewed some JavaScript basics, let’s see what the above code produced.  Starting with the button inside the “main” <div>:

The event handler will call the callback function once the button is clicked because we’ve attached the click() method to the button selector. That will result in displaying our string “Button Clicked” below the button itself.

Notice that since we used the jQuery method html(), the content is only rendered once. Even if we click the button many times, only one instance of the <p> element is displayed. If we wanted to display the string each time the button is clicked, we could use append() instead of html():

<script>
  $('#btn-primary').click(() => {
    $('.new-content').append("Button Clicked!")
  })
</script>

Clicking the button three times will see our string added to the  “new content” <p> tag three times:

This is an example of our callback function being called each time the button is clicked. You will notice the jQuery click() method is crucial to building an engaging user experience as you progress further in the journey of writing code.

Conclusion

In this article, we discussed what the jQuery method click() is, what it does, and where we commonly find it. We looked at an example of attaching click() to a button and displaying new content either once after the button is clicked, or as many times as the button is clicked. 

The jQuery method click() is a powerful way to create functionality of a web page or app while containing your code to just a few lines. Try attaching click() to other elements than a button and see what happens!