The click method of jQuery can be used in any HTML element like div, paragraphs, span, hyperlink, etc. to accomplish some task as required.
In this tutorial on jQuery click method, I will show you how to use the click method in different elements.
Also, as the click is a shorthand of jQuery .on (“click”, event_handler) I will show you how with examples.
The syntax to use the click method
//Perform some action;
});
A simple example of click
In this example, I will simply use a div element with simple style, a border line to let you know where it starts and ends.
As you click inside that div element, the event handler will throw an alert.
The code:
<!DOCTYPE html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $(".clickcls").click(function(){ alert("You have clicked inside Div!"); }); }); </script> <style> .clickcls{ width:400px; height:400px; border: 1px solid red; } </style> </head> <body> <div class="clickcls">Click anywhere in div!</div> </body> </html>
This is how it worked:
- First of all jQuery library is included inside the head section.
- After that, the div element is called by class name in the script section where the click method is used.
- Finally, the event handler will deliver an alert as the mouse is clicked.
- As mentioned, the click event occurs as the mouse is depressed or the button is released while the mouse pointer is inside that div element.
- If you click inside the div and drag outside of the div (red border area) without releasing the mouse, the event will not occur.
- In scenarios like these where you must perform some action as the mouse is clicked, you should use mousedown event of JavaScript.
Click example without shorthand
As mentioned in the above section, the $.click is the shorthand of jQuery .on(“click”, event_handler), the following example shows how.
The same div element is used and the result will also be the same.
As you can see, the same is the output (except alert message). The following script is used in the example:
<script> $(document).ready(function(){ $(".clickcls").on("click",function(){ alert("Click with on method!"); }); }); </script>
One thing to be noted is that the $.on method is quite wide in usage.
You can use many events in the $.on method like dblclick, change, and others while it is also the replacement of other jQuery methods. To learn more about it go to its own chapter.
An example of $.click in a link
In the following example, the click method is attached to the link’s click event.
Again as you click the link and remain inside the link area the alert will be shown, which is placed inside the event handler.
See the example code below that you may just copy/paste and execute in your editor:
The code
<!DOCTYPE html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $("#clk_link").click(function(){ alert("Link is clicked!"); }); }); </script> <style> #clk_link{ border: 1px solid red; } </style> </head> <body> <a href="#" id="clk_link">Click here to trigger alert!</a> </body> </html>
A click example with color div elements
This is a more visible example of the click method where I have created five colored div elements
. Each div has a different color – red, green, yellow, blue, and black.
In front of these five div elements, a larger div is given with white color.
As you click any of the colored div element, the color of the larger div will be changed to the one that you clicked.
Script, CSS, and HTML
<!DOCTYPE html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $("#div1").click(function(){ $("#chgcolor").css("background-color","red"); }); $("#div2").click(function(){ $("#chgcolor").css("background-color","green"); }); $("#div3").click(function(){ $("#chgcolor").css("background-color","yellow"); }); $("#div4").click(function(){ $("#chgcolor").css("background-color","blue"); }); $("#div5").click(function(){ $("#chgcolor").css("background-color","black"); }); }); </script> <style> #div1{ width:30px; height:50px; background-color:red; } #div2{ width:30px; height:50px; background-color:green; } #div3{ width:30px; height:50px; background-color:yellow; } #div4{ width:30px; height:50px; background-color:blue; } #div5{ width:30px; height:50px; background-color:black; } #chgcolor{ width:200px; height:200px; background-color:white; border:1px solid black; margin-top:-250px; margin-left:200px } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> <div id="chgcolor"></div> </body> </html>
So what is done in the script section of the code?
- Each div is created with an ID for which the style is created in the style section.
- In the style section, each colored div is given a color.
- Then in the jQuery section, I used the click event of each div element. As you click on a specific div element the background color of the larger div will be changed by using the $.css method of jQuery.
- The .css method allows you to change the CSS of any given element.
For example,
jQuery button Click example with animation
In the following example, an animation is created. The click handler is attached to the button’s click event.
As you click on the button “Click to Start Animation” the animation will be started.
Code:
<!doctype html> <html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script> $(document).ready(function() { $( "#runani" ).click(function() { animateex(); }); function animateex() { $( "#divanimation" ).animate({ opacity: 0.6, width: "160", height: "110", backgroundColor:"#8000FF", color:"#fff", lineHeight: "75px", fontSize:"18px" },3000,animateback); } function animateback() { $( "#divanimation" ).animate({ opacity: 1, width: "300px", height: "200px", backgroundColor:"#CD9C9C", color:"#000", lineHeight: "150px", fontSize:"25px" },3000,animateex); } }); </script> <style> #divanimation { padding: 8px; background:#CD9C9C; width: 300px; height:200px; box-shadow: 0 0 5px #aaa; font-size: 25px; text-align:center; border-radius: 200px; line-height: 150px; } button{ margin: 50px; } </style> </head> <body> <div id="divanimation">Button Click</div> <button id="runani">Click to Start Animation</button> </body> </html>
As you can see in the code of the above example, when you click on the button, the click event triggers a function animateex that calls div element with the animate method and it starts animating with new CSS properties.
Once the animation is completed, the animate method calls a callback function animateex that will take the animation back to what it was initially.
The process goes on that was basically started after you clicked the button.
Using click method in a UI dialog example
The use of click method is quite wide on web pages. Until now we have seen using it in div, links, animation, buttons, etc..
In this example, I will use jQuery UI dialog widget. The dialog widget is the part of UI library by jQueryUI.
In the dialog example, I have created an alert (dialog box) with “OK” button. The dialog will be closed as you click anywhere outside of the dialog box.
Complete code for this example:
<!doctype html> <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="dialog-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script> $(function() { $( "#j_dialog" ).dialog({ autoOpen: true, modal: true, width: 350, height: 300, open: function() { jQuery('.ui-widget-overlay').click(function() { jQuery('#j_dialog').dialog('close'); }) }, buttons: { Ok: function() { $( this ).dialog( "close" ); } }, show: { effect: "bounce", duration: 1500 }, hide: { effect: "fade", duration: 1000 } }); }); $( ".selector" ).dialog({ closeOnEscape: false }); </script> </head> <body> <div id="j_dialog" title="Click Example"> <p>This is a message dialog. The purpose is to show how click is attached to close as you click anywhere outside of dialog!</p> </div> </body> </html>
So what is done in the code of this example?
First of all, the jQuery and jQuery UI libraries are included.
Then I created a dialog box with some options like width, height, modal, and others.
After that, in the open option, I specified to close the dialog box as the mouse is clicked anywhere outside of the dialog box.
Although the dialog will be closed if you click Ok or cross button, this is not handled in this code. The others are built-in.
Click example with form element – checkbox
Now let us have a look at the form element example. The click event and method are used the same way as in other elements of HTML.
In this example, as you click on the checkbox, an alert will be shown.
Code:
<!DOCTYPE html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $("#chk1").click(function(){ alert($("#chk1").val()) }); }); </script> <style> #clickcls{ width:200px; height:100px; border: 1px solid red; } </style> </head> <body> <div id="clickcls"> <input type="checkbox" id="chk1" value="Check 1"/> Click to trigger alert </div> </body> </html>
The alert is attached to click event of the checkbox. As you click on the checkbox, the code in jQuery will catch and trigger an alert with the value of the checkbox by using the $.val method.
Similarly, you can use radio buttons, text boxes, and other form elements’ click event to perform some action. See the following example of multiple radio buttons.
jQuery click example with multiple radio buttons
In this example, multiple radio buttons are used that are related to the same group.
The div contains six radio buttons that have the same name selColor i.e. you can select one among the six radio buttons.
Each radio button is given a color value name like red, green, etc.
As you select a radio button by the mouse the jQuery click triggers the method. In the event handler, the background color of another div will be changed to the selected radio button.
Have a look at the demo by clicking the link or image below:
The code:
<!DOCTYPE html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $("input:radio[name=selColor]").click(function(){ var colorname; colorname= $('input:radio[name=selColor]:checked').val(); $("#chgcolor").css("background-color",colorname); }); }); </script> <style> #clickcls{ width:200px; height:150px; border: 1px solid red; } #chgcolor{ width:100px; height:100px; background-color:white; border:1px solid black; margin-top:-100px; margin-left:250px } </style> </head> <body> <div id="clickcls"> <input type="radio" name="selColor" id="radio1" value="red"/> red <br /> <input type="radio" name="selColor" id="radio2" value="green"/> geen <br /> <input type="radio" name="selColor" id="radio2" value="yellow"/> yellow <br /> <input type="radio" name="selColor" id="radio2" value="blue"/> blue <br /> <input type="radio" name="selColor" id="radio2" value="orange"/> orange <br /> <input type="radio" name="selColor" id="radio2" value="black"/> black <br /> </div> <div id="chgcolor"></div> </body> </html>
So what is done in the script section?
In the click event handler of selColor radio group, as you click a radio the value of the selected radio is assigned to a variable in this line:
In the next line of code, the $.css method is used to assign that value to the right div:
That’s it!