jQuery click
jQuery click() event syntax:
Here click() method is used without an argument.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!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