jQuery Click

The click event is triggered when you click and release the mouse button. Generally a click event triggeres on clicking a link: For example, a link on a thumbnail image cpuld potentially display a larger version of that image when clicked. However, clicking link is not the only way click event is triggered. You can also make any tag on a page respond to an event - even just clicking anywhere on the page.

The click event can also be triggered on links via the keyboard. If you tab to a link, then press the Enter (Return) key, the click event fires.

Another thing to notice is that a click corresponds to an element. The click event is only triggered both the following events happen:

The mouse button is depressed WHILE the pointer is INSIDE THE ELEMENT.
The mouse button is released WHILE the pointer is INSIDE THE ELEMENT.

Let us leanr with a simple example.


<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<div id="id1">
id 1 text

<div id="id2">
id 2 text
$('#id1').click(function() {
 $("div#id1").text("You Clicked first Line");

$('#id2').click(function() {
 $("div#id2").text("You Clicked Second Line");


It has two div elements. Depending upon where you click , it will change the test of that div element.
You may like to try this example here.

dblclick Event

When you press and release the mouse button twice, a double-click event triggers. It is an action similar to the on you use to open a folder or file on your desktop. Double-clicking not a widely used web-surfer action, though we may see increase in its usage with the advent of the a lot of desktop functions migrating to cloud. so if you use this event, you should make clear to visitors where they can double-click and what will happen after they do. Also note that a double-click event is the same thing as two click events, so do not assign click and double-click events to the same tag. Otherwise, the function for the click will run twice before the double-click function runs.