Updated February 21, 2023
Definition of jQuery click button
jQuery click button either triggers a click event or adds a function to be called when one happens. In the first two variations, this method is a shortcut for on (“click,” handler), and in the third, it’s a shortcut for trigger (“click”). The button is pressed and released when the pointer is over an element. When we click on an HTML element, the jQuery click event triggers.
What is the jQuery click button?
- The element receives a click event. For example, the jQuery click event occurs every time an HTML element is clicked.
- The click method in jQuery is used to activate the onclick function. In addition, the method HTML Element is used to imitate a button click.
- The jQuery Click function initiates a click event. A click method fires an event whenever one of the relevant elements is clicked. The click event is triggered by the jQuery click method.
How to use jQuery Click()?
- We can connect a function to the click method and run it whenever a click event happens, allowing us to run code every time triggered.
- For instance, consider $(“p”). When a paragraph is clicked on a document, a click will fire the click event.
- The click method connects an event handler to the JavaScript event “click” or causes an event to be triggered on an element.
- The event click is dispatched to the element whenever the mouse pointer is over and the button is pushed and released. Any element of HTML can receive the event.
- To invoke the click method, there are two options. With the help of a certain function argument and in the absence of a specific argument
- The onclick function in jQuery can be used in HTML elements such as div, paragraphs, hyperlinks, and so on to accomplish the desired objective. A mouse event occurs when the button on the mouse is depressed.
- Click event is triggered if the following events have occurred.
1) The mouse button is pushed while the pointer is inside the element.
2) The mouse button is released while the pointer is inside the element.
- Before taking action, this is usually the intended sequence. If this isn’t necessary, the mousedown or mouseup events might be more appropriate.
Below is the syntax of the jQuery click method as follows.
Syntax:
$(selector).click()
$(selector).click(function)- The “function” parameter is an optional parameter utilized for execution when a click event occurs.
- Return value: The function to perform returns the selected element.
- The example below shows how to use the jQuery click method. When we click on the text, it becomes invisible.
- This occurs because the paragraph selector is associated with the click method, and the current element is hidden using the hide method in the custom function. The custom function inside the click event is called when a paragraph is clicked.
Code:
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.4.0/jQuery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h2> jQuery Click Button </h2>
<p>This example shows how to use jQuery click method. We are using click method to hide the data when clicking on paragraph. </p>
</body>
</html>Before clicking on paragraph –
After clicking on paragraph -‘
- The above output shows that it will show the paragraph in output after running the code, but it will be invisible after clicking on the paragraph.
- We have used the click method; it will be hidden or not visible to us after clicking on a paragraph.
- To do a specific operation, the jQuery click method can be applied to any HTML element, such as divs, paragraphs, spans, and hyperlinks.
- A click is a mouse event that occurs when the mouse button is pressed. To make it happen, the mouse pointer must be within that element.
- The onclick method in javascript fires the onclick event. This is because the method already has an element attached to it. As a result, one element can independently call the event onclick of another element.
- An object must first be specified with a clickable attribute of a specific style. The object must have onclick action declared.
- In the code’s body, a script block has to be built where the method click () is attributed to a particular format style.
- Within the function call, the onclick method, which has previously been declared, will be invoked.
jQuery click button examples
Below is the example of the jQuery click button as follows:
We have not passed any function in the below code to the method.
Code:
<html>
<head>
<script
src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js">
</script>
<script>
$(document).ready(function() {
$("p").click();
});
</script>
<style>
p {
display: block;
width: 200px;
padding: 30px;
font-size: 20px;
border: 2px solid red;
}
</style>
</head>
<body>
<p onclick = "alert('paragraph was clicked')">jQuery Click Button</p>
</body>
</html>
In the below example, we have passed the function to the method.
Code:
<html>
<head>
<script
src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js">
</script>
<script>
$(document).ready(function() {
$("p").click(function() {
$(this).fadeOut();
});
});
</script>
<style>
p {
display: block;
width: 300px;
padding: 20px;
font-size: 20px;
border: 2px solid red;
}
</style>
</head>
<body>
<p>This example shows jQuery click button example. We are using click method to hide the word when clicking on paragraph.</p>
</body>
</html>Before clicking on paragraph –
After clicking on the paragraph, the words get hidden-
The below example shows after clicking on the button click event will occur. It will hide the title of the page.
Code:
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.4.0/jQuery.min.js">
</script>
<script>
$(document).ready(function()
{
$("#myid").click(function()
{
$("h2").hide();
});
});
</script>
</head>
<body>
<h2>jQuery Click Button</h2>
<p>This is the example of jQuery click button. After clicking on "Hide the title button" the title of the page is hidden.</p>
<button id="myid">Hide The Title</button>
</body>
</html>
- The above example will show the title in output after running the code, but it will be hidden after clicking on the button. This is because the page is not visible to us after clicking on the button title.
Conclusion
The element receives a click event. When we click on an HTML element, the jQuery click event triggers. The click event is triggered by the jQuery click method. jQuery click button either triggers a click event or adds a function to be called when one happens.
Recommended Articles
This is a guide to the jQuery click button. Here we discuss the What is jQuery click button, How to use jQuery Click(), and Examples with code implementation. You may also have a look at the following articles to learn more –
