Question

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()");
}

Answer 1

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 );