function called at page ready

function called at page ready

I'm not sure if this is a jQuery or a simple javascript question.
How can I associate a named function with a button click (or any other jquery event for that matter)?

I have two examples, where an anonymous function is defined and assigned to a button, and that example1 works perfectly.
The second example I'm trying to define a named function and associate that with the button. In this case, the function executes, and the alert is displayed as soon as the page is loaded, without pressing the button. I'd like to reuse the function since I plan to expand the example to update different DIV elements instead of just creating an alert.


Example 1 works perfectly, alert displays after the button is pushed.
  1. <!DOCTYPE html>
    <HTML>
    <HEAD>
        <TITLE>Example1</TITLE>
        <script src="jquery.js"> </script>
        <script>
            $.ajaxSetup({cache: false});
            $(document).ready(function(){
                $("#button_a").click(function(){
                    var myid = 101;
                    $.ajax({
                       type: 'POST',
                       url: 'example.pl',
                       data: { 'data_id': myid },
                       success: function(res) {
                           alert("your ID is: " + res.result);
                       },
                       error: function() {alert("did not work");}
                    });
                });
            });
        </script>
    </HEAD>
    <BODY>

    <P> Example 1 </P>
    <BUTTON id=button_a> UpdateLog_a </BUTTON>
    </BODY>
    </HTML>

Example 2, which displays the alert as soon as the page is loaded, without clicking on the button.

  1. <!DOCTYPE html>
    <HTML>
    <HEAD>
        <TITLE>Example1</TITLE>
        <script src="jquery.js"> </script>
        <script>
            $.ajaxSetup({cache: false});
            function myFunction(id){
                $.ajax({
                   type: 'POST',
                   url: 'example.pl',
                   data: { 'data_id': id },
                   success: function(res) {
                       alert("your ID is: " + res.result);
                   },
                   error: function() {alert("did not work");}
                });
            }
            $(document).ready(function(){
                $("#button_a").click(myFunction(102));
            });
        </script>
    </HEAD>
    <BODY>

    <P> Example 2 </P>
    <BUTTON id=button_a> UpdateLog_a </BUTTON>
    </BODY>
    </HTML>