Showing posts with label jQuery click. Show all posts
Showing posts with label jQuery click. Show all posts

Click event in jQuery

jQuery mouse click event
In web application we need capture mouse click event in jQuery. To perform some clientside operations in asp.net we can easly capture mouse click event in jQuery.

jQuery mouse click event happens when we click mouse button on some spicific element on page. We can use click event to show some information box, or we can show hide div on click event of mouse...etc
Here we will look at very simple exaple of how to show hide div when we click on link

Sample code for click event in jQuery [ASP.NET]


<html>
<head><title></title>
  <script src="jquery-1.4.1.js" ></script>
  <script src="jquery-1.4.1.min.js" ></script>
    
 <style type="text/css"> 
  .info {
   position: absolute;
   z-index: 200;
   display: none;
   text-align: center;
   background: gray;
   border: 2px solid silver;
 }
</style>
 <script type="text/javascript"> 
//<![CDATA[
  $(document).ready(function(){
   $("a").click(function(){
   $(".info").show();
  });
//]]>
</script>
</head>
<body>
 <form>
 <p>
   Click on this link <a id="aspnet" href="#" >jQuery mouse clickr</a>.
 </p>
 <div class="info">
   You will see some infomation when you <b>mouse click</b> on link. 
 </div>
</form>
</body>
</html>