All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

jQuery Onclick Function

Last Updated : Mar 11, 2024

jQuery Onclick Function

In this article we will show you the solution of jQuery onclick function, jQuery is a fast, lightweight, and feature-rich JavaScript library. A lot of things can be done with jQuery, including making HTML documents, handling events, traversing, manipulating, etc.

jQuery's onclick functionality is triggered with the click() method.

To run a function, the user can attach a function to the click method whenever a click occurs.

Every time click() is triggered, a piece of code is executed. 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, and the jQuery click event is triggered when we click on an HTML element.

Step By Step Guide On jQuery Onclick Function :-

<!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>TalkersCode Example </p>
</body>
</html>
  1. As shown in the output above, it will show the paragraph after running the code, but after clicking on it, it will become invisible.
  2. The paragraph is concealed and also not visible to us if we use the click approach.
  3. Any HTML element, including divs, paragraphs, spans, and hyperlinks, can be targeted using the jQuery click method.
  4. Clicks are mouse events that occur when a mouse button is pressed. This can only happen if the mouse pointer is within the element.
  5. A javascript onclick event is triggered by the onclick method. This is due to the element that is already attached to the method. Thus, it is possible for one element to call the onclick event of another independently.
  6. It is necessary to specify a clickable attribute of a specific style on an object before it can be used. A declared onclick action must be present in the object.
  7. There needs to be a script block in the body of the code that attributes the method click () to a particular style of formatting.
  8. Function calls will invoke the onclick method that has already been declared.

Conclusion :-

jQuery's Click() function starts a click event when a button is clicked. By using the click() method, an event is fired every time a relevant element is clicked on.

Upon completion of this event, higher-level elements in the document tree are triggered to fire click events (event chain).

I hope this article on jQuery onclick function helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪