Updated April 18, 2023
Introduction to jQuery click
The jQuery click() function handles the click event when the click event occurs for a specific element. The jQuery click() function is a built-in function in jQuery. The jQuery click() function triggers the click event and executes 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 clicks. 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 do 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 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 generated 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 a 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 bound 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 click() function to handle the click event with handler function as a 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 a child of the div element. </p>
<span> This is a span box and it is a child of div element. </span>
</div>
</body>
</html>Java Servlet Training (6 Courses, 12 Projects)JavaFX Training (1 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 generated and the “p” element content font style changes as applied by the handler function.
Example #3
Example of click() function to handle the click event for multiple elements with the same handler function as a 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 is clicked, the click event gets generated, and the respective element contents, elements font style gets changed as applied by the handler function.
Conclusion
The jQuery click() function is a built-in function used to bind and handle the click event when the click event occurs for a specific element.
Recommended Articles
This is a guide to jQuery click. Here we have discussed the introduction, working of jQuery click() function,, and examples. You may also have a look at the following articles to learn more –
