13 May 2015

jQuery Events – .click() Event

Have you ever thought how a “Read More” button, when clicked, slides more content down for you to read? The jQuery click event is the cause of this useful, yet simple functionality. Accordions, tabs, image sliders and carousels are examples of the endless list of functional use for the jQuery click event. This event is probably the most popular and most used event on any website.
The click event works by targeting a specific element in your html that allows the user to hover and click on the element. On the release of the mouse click, the function will begin to run.

For example:

HTML

<div id=”target”></div>

JQuery


jQuery(‘#target’).click(function() {
alert(‘You just clicked on div id target’);
});

This simple function will cause a JavaScript alert to appear on your webpage. However, you can change the click function from running an alert to anything you wish to display, hide or submit. I fully encourage those who want to learn more about this event to take this very simple example and run with it.

Share This Article