Hi I am learning JQuery and I have written a small function where I am attaching a function with a button's click event.

this is the head element of the HTML

<script type="text/javascript">

    $(pageLoaded); 

    function pageLoaded() 
    {
        $("#Button1").bind("click", 
                            { key1: "value1", key2: "value2" }, 
                            function buttonClick(event) 
                            {
                               $("#displayArea").text(event.data.key1);
                            }
                            );
    }                    

</script>

This is the body of the HTML

<input id="Button1" type="button" value="button" />

<div id = "displayArea" style="border:2px solid black; width:300px; height:200px">

This code works fine. But when I try to write the buttonClick function outside the anonymus method, it does not work anymore.

I tried to call it this way:

$("#Button1").bind("click", 
                   { key1: "value1", key2: "value2" }, 
                   buttonClick(event));

function buttonClick(var event) 
{
      $("#displayArea").text(event.data.key1);
}

This is not working. Am I doing some mistake while passing the Event as parameter? what is the correct way to do it without using anonymous methods?