jQuery click()

Filed Under: jQuery

jQuery click() method fires on clicking an HTML element. This method will attach an event handler to the click event. We can do desired manipulations on the selected HTML element using this event handler.

jQuery click

jQuery click() event syntax:

  • click()

Here click() method is used without an argument.

  • click(handler)

The handler could be any function that is executed each time the event is fired.

jQuery Click Example

Following example demonstrates the use of jQuery click() method.


<!DOCTYPE html>
<html>
<head>
<title>jQuery Click Event Example</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script> 
$(document).ready(function(){
  $(".divClass1").click(function(){
    $( this ).slideUp("slow");
  });
});
$(document).ready(function(){
  $(".divClass2").click(function(){
    $( this ).html("Mouse Clicked");
  });
});
</script>
 
<style> 
.divClass1
{
    padding:5px;
    text-align:center;
    background-color:yellow;
    border:solid 1px;
}
.divClass2
{
    padding:5px;
    text-align:center;
    background-color:grey;
    border:solid 1px;
}
</style>
</head>
<body>


<div class="divClass1">click me to slide Up</div>
<div class="divClass2">Click Me to Change Text</div>

</body>
</html>

In this example, you can see that click() method is triggered while clicking on the <div> element. In this method, we pass a handler to do the sliding transition and changing HTML text of the selected <div> element. The slideUp() method executes each time when the click event is fired.

jQuery click demo

You can see above example in action by visiting below link.
jQuery Click Event Demo

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages