$ (document) .ready похоже на выстрел, но не регистрирует события

Question

При загрузке два события запускаются, но не регистрируются указанными обработчиками событий. Код, который не ведет себя так:

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

Это весь сценарий:

    /* 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

Вы не совсем понимаете функции как первоклассные объекты.Когда вы видите это:

foo()

Это вызываемая функция foo.Когда вы видите это:

foo

Это переменная.Переменные могут содержать функции.

Ваш код выглядит следующим образом:

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

Когда вы видите () после foo, это означает, что он вызывает функцию и заменяет ссылку наэто с его возвращаемым значением.Это не то, что вы хотите.То, что вы хотите, это просто передать функцию в качестве переменной.Это будет выглядеть так:

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

Таким образом, обратный вызов регистрируется со ссылкой на функцию, и эту функцию можно вызывать при необходимости, а не сразу.

В частности,Ваш код должен выглядеть следующим образом:

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

Answer 2

Вам нужно изменить:

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

должно быть:

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

Причина в том, что loadCalendarContent (и loadPatientContent тоже) ничего не возвращает, поэтому loadPatientContent () не определено.Другими словами, вы пытаетесь запустить undefined каждый раз, когда нажимается #calendar_menu_item.Если вы хотите выполнять функции и в domready (document.ready), вы можете сделать это с помощью следующего кода:

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

Answer 3

loadCalendarContent является ссылкой на функцию, но loadCalendarContent() выполняет функцию, поэтому измените это: