JQuery Click Event

This example demonstrates how to set up JQuery click events.

JQuery-Click-Event-Example.html


HTML Example - Source Code

I will keep the explanation short. Lines 27 to 29 create the click events. These call the functions on lines 10 to line 20. That is all.

   1 <!DOCTYPE html>
   2 <html lang="en-us">
   3 <head>
   4 <meta charset="utf-8" />
   5 <title>JQuery: Click Event Example</title>
   6 <link href="/css/blip.css" rel="stylesheet" type="text/css"></link>
   7 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
   8 <script>
   9 
  10 function save01(){
  11   alert("Save clicked");
  12 }
  13 
  14 function clear01(){
  15   alert("Clear clicked");
  16 }
  17 
  18 function load01(){
  19   alert("Load from disk clicked");
  20 }
  21 
  22 
  23 
  24 $(document).ready(function() {
  25     
  26   // Event Handlers
  27   $('#save01').click(save01);
  28   $('#clear01').click(clear01);
  29   $('#load01').click(load01);
  30 });
  31 </script>
  32 </head>
  33 <body>
  34 <h2>Click Event Example</h2>
  35       
  36 <form name="Note01Form">
  37   <button id="save01">Save</button><button id="clear01">Clear</button><button id="load01">Load from Disk</button><br/>
  38   <textarea id="id01" rows="10" cols="65">
  39 Your text here. 
  40    </textarea>        
  41 </form>
  42 
  43 </body>
  44 </html>