Introduction to jQuery click
The jQuery click() function is used to handle the click event when the click event occurs for the specific element. The jQuery click() function is a built-in function in jQuery. The jQuery click() function trigger the click event and execute the click() function or the attached function whenever the click event occurs by clicking an element. So this way we can perform some action every time the element click. The click() function is the short expression of “.on(“click”, handler)” and “.trigger(“click”)” expressions.
Syntax of jQuery click() function:
$(selector).click(function);
Parameters:
- function: This is an optional parameter. It specifies the attach function which is to be executed whenever the click event occurs.
Return Value:
They does not return any value.
Working of jQuery click() Function
- The jQuery click() function accepts one parameter that is the name of the function to run when a click event occurs and it is optional.
- Suppose we have a div element in the HTML page that contains have some content.
- We need to perform the click event handling on the div element on click, so we can use the click() function as “$(“div” ).click(function(){ alert(” clicked “); });” .
- Now when we click any div element in the page the click event gets generate and displays the alert message “clicked”.
Examples of jQuery click()
Given below are the examples of jQuery click:
Example #1
Example of jQuery click() function to handle the click event without any function as parameter.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery click() function </title>
</head>
<script>
$( document ).ready( function( ) {
$( "button" ).click();
});
</script>
</head>
<body>
<h3> This an example of click() function: </h3>
<!-- click on this method -->
<button onclick = "alert( 'Button was clicked' );" style = "background-color : red;" > Click to generate click event. </button>
</body>
</html>
Output:
Once we click on the button, the output is:
In the above code, the “button” element is created and it is bind to the click event by using the function click() as “$( “button” ).click();” which is not accepting any parameter. The button “onclick” property is used to display the alert message when the button is clicked, as we can see in the above output.
Example #2
Example of jQuery click() function to handle the click event with handler function as parameter.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery click() function </title>
<style>
p {
display : block;
width : 310px;
padding : 15px;
font-size : 30px;
border : 2px solid green;
}
</style>
<script>
$(document).ready(function() {
$("p").click( function(){
$(this).css({
"color" : "red",
"border" : "2px solid black"
});
});
});
</script>
</head>
<body>
<h3> This an example of click() function: </h3>
<div>
<p> This is a paragraph and it is a child of div element. </p>
<span> This is a span box and it is a child of div element. </span>
</div>
</body>
</html>
4.5 (6,403 ratings)
View Course
Output:
Once we click on the p element, the output is:
In the above code, there is a “div” element that has “p”, and “span” as the child elements. Next, the click() function is used to bind the click event to the “p” element with the handler function. So when the “p” element content is clicked the click event gets generate and the “p” element content font style gets change as applied by the handler function.
Example #3
Example of jQuery click() function to handle the click event for multiple elements with same handler function as parameter.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery click() function </title>
<style>
p {
display : block;
width : 310px;
padding : 15px;
font-size : 30px;
border : 2px solid green;
color : blue;
}
h3 {
display : block;
width : 310px;
padding : 15px;
font-size : 30px;
border : 2px solid green;
color : green;
}
span {
display : block;
width : 310px;
padding : 15px;
font-size : 30px;
border : 2px solid green;
color : yellow;
}
</style>
<script>
$(document).ready(function() {
$( "h3, p, span" ).click( function(){
$(this).css({
"color" : "red",
"border" : "2px solid black"
});
});
});
</script>
</head>
<body>
<h2> This an example of click() function: </h2>
<h3> This is a heading to fade out. </h3>
<p> This is a paragraph to fade out. </p>
<span> This is a span box to fade out. </span>
</body>
</html>
Output:
Once we click on the heading, the output is:
Once we click on the paragraph, the output is:
Once we click on the span, the output is:
In the above code, there are “h2”, “h3”, “p”, and “span” elements are used. Next, the click() function is used to bind the click event to the “h3”, “p”, and “span” elements with the handler function. So when the “h3” or “p” or “span” element content clicked the click event gets generate and the respective element contents elements font style gets change as applied by the handler function.
Conclusion
The jQuery click() function is a built in function, which is used to bind and handle the click event when the click event occurs for the specific element.
Recommended Articles
This is a guide to jQuery click. Here we discuss the introduction, working of jQuery click() function and examples respectively. You may also have a look at the following articles to learn more –
