$(document).ready Seems to Fire but not Register Events

On load the two events are fired, but not registered with the specified event handlers. The code that is not behaving is:

$("#calendar_menu_item").bind('click', loadCalendarContent() );
$("#patient_menu_item").bind('click', loadPatientContent() );   

This is the whole script:

/* Add stuff only once the DOM is loaded. */
$(document).ready
    (
    function(){ 
        //Initialize the main menu  
        var menuItems = [$("#calendar_menu_item"), $("#patient_menu_item")];
                
        for (i = 0; i < menuItems.length; i++) {
            var menuItem = menuItems[i];
            
            menuItem.bind('mouseover', function(){
                $(this).css("background-color", "#749ccf");
            });
            
            menuItem.bind('mouseout', function(){
                $(this).css("background-color", "#506077");                     
            });
        }       
        
        $("#calendar_menu_item").bind('click', loadCalendarContent() );
        $("#patient_menu_item").bind('click', loadPatientContent() );               
    }
    );  
        
function loadCalendarContent(){
    $("#content_area").load('calendar.html');           
}

function loadPatientContent(){
    $("#content_area").load('patient.html');            
}       

function doAction(){
    alert( "in doScript()");
}

You need to change:

        $("#calendar_menu_item").bind('click', loadCalendarContent() );
        $("#patient_menu_item").bind('click', loadPatientContent() ); 

should be:

        $("#calendar_menu_item").bind('click', loadCalendarContent );
        $("#patient_menu_item").bind('click', loadPatientContent ); 

The reason for this being that loadCalendarContent (and loadPatientContent too) doesn't return anything, so loadPatientContent() is undefined. In other word, you try to run undefined everytime #calendar_menu_item is clicked. If you wish to execute the functions at domready too (document.ready), you can do that with the following code:

        loadCalendarContent();
        loadPatientContent();
        $("#calendar_menu_item").bind('click', loadCalendarContent );
        $("#patient_menu_item").bind('click', loadPatientContent ); 

You're not quite understanding functions as first-class objects. When you see this:

foo()

It is a function called foo that is being called. When you see this:

foo

It is a variable. Variables can contain functions.

Your code is like this:

$(element).bind('click', foo() );

When you see the () after foo, it means that it's calling the function and replacing the reference to it with its return value. This isn't what you want. What you want is to simply pass the function as a variable. That would look like this:

$(element).bind('click', foo);

That way, the callback is registered with a reference to the function, and that function can be called when necessary, not straight away.

Specifically, your code should look like the following:

$("#calendar_menu_item").bind('click', loadCalendarContent);
$("#patient_menu_item").bind('click', loadPatientContent);

loadCalendarContent is the reference to the function, but loadCalendarContent() executes the function, so change this:

$("#calendar_menu_item").bind('click', loadCalendarContent() );

to

$("#calendar_menu_item").bind('click', loadCalendarContent);