Calling a Script when button clicked

Calling a Script when button clicked

I would like to call a script defined within script tags in the HEAD section of the jsp. 

  1. <head>

        

    <link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.0a1.min.css" />
        
    <script type="text/javascript" src="jquerymobile/jquery-1.4.3.min.js"></script>
        
    <script type="text/javascript" src="jquerymobile/jquery.mobile-1.0a1.min.js"></script>

        

    <script>

            $

    ("#button").click( function()
               
    {
                 alert
    ('button clicked');
               
    }
            
    );
        
    </script>


    </head>


    <body>
        
    <html:errors/>

        

    <div data-role="page" data-theme='a'>

          

    <div data-role="header">
            
    <h1>jquerymobile</h1>
          
    </div>

          

    <div data-role="content">
            
    <div id="button" data-role="button">Click on button</div>
          
    </div>

       

    </div>
    </body>

When the Button is clicked, I want the alert to be shown. But nothing happens when the button is clicked.

Where am I going wrong?