JQuery Mouse Click

From CoderLearner
Jump to: navigation, search

jQuery Mouse Click

This is a mouse click event for single mouse click.

Syntax

 $(Selector).click(function(){

   });

Example 1

<!DOCTYPE html>
<html>
   <head>
      <title>Contain</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(document).ready(function(){
            $('button#mybtn').click(function(){
               alert('click me');
            });
         });
      </script>
   </head>

   <body>
      <button id="mybtn">Show</button>
   </body>
</html>

Try It

Example 2

When mouse click, trigger form submit.

<!DOCTYPE html>
<html>
   <head>
      <title>Contain</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(document).ready(function(){
            $('#submitme').click(function(){
               $('form#frm').submit();
               
            });
            
            $('form#frm').submit(function(){
               alert($('#fullname').val());
            });
         });
      </script>
   </head>

   <body>
      <form id="frm">
         <input type="text" name="fullname" id="fullname" value="Job">
         <span id="submitme">Submit</span>
      </form>
   </body>
</html>

Try It

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>