click action won't bind

Question

The code below only works when I comment out the code for clicks - ie the hover functions don't even work if I don't comment out the click event handlers, so I know that's the culprit. Any idea of what's going wrong?

Thanks so much!

 $(document).ready(function() {

    /* helper function to main database querying function
       below. Figures out the number of activities needed
       for completeness. Takes the box's class name as an
       argument
    */
    var complete = function(arg) {
        switch(arg) {
            case "three":
                return 3;
            case "four":
                return 4;
            case "seven":
                return 7;
        }
    };


    // determine if we change color of box
    var changeColor = function(arg) {
        if (arg.hasClass("zero")) {
            arg.removeClass("zero").addClass("between");
        }
            else if (arg.hasClass("between")) {
                if (numComplete == toComplete) {
                    arg.removeClass("between").addClass("complete");
                } 
            }
    };


    // CHANGE BOX COLOR WHEN HOVERING OVER IT
    $(".innerBox").hover(function() {
            if ($(this).hasClass("zero")) {
                    $(this).addClass("innerBoxHoverGrey");
            }
            else if ($(this).hasClass("between")) {
                    $(this).addClass("innerBoxHoverYellow");
            } else {
                    $(this).addClass("innerBoxHoverGreen");
            }},

        function() {
            if ($(this).hasClass("innerBoxHoverGrey")) {
                $(this).removeClass("innerBoxHoverGrey");
            } else if ($(this).hasClass("innerBoxHoverYellow")) {
                $(this).removeClass("innerBoxHoverYellow");
            } else {
                $(this).removeClass("innerBoxHoverGreen");
            }
        }
    );


    // WHERE ALL THE JUICE IS - CLICK ON A BOX, CHECK WITH DATABASE
    $(".innerBox").bind("click", function() {

        // This is what we'll be passing to everything
        var className = $(this).attr("id");
        var numComplete;
        var toComplete;

        // DATA TO PASS 
        var data = {
            "val": className
        };

        // TAKE CARE OF TIME FIRST
        var recentlyCompleted = false;


        $.getJSON("time.php", function(result) {
            $.each(result, function(key, val)) {
                recentlyCompleted = val;
            };
        });

        /*
        if (!recentlyCompleted) {
            throw new Error("error");
        } else {

            // UPDATE ACTIVITY TABLE - not meant to return anything
            $.getJSON("updateActivityTable.php", data, function(newResult) {
                alert(newResult);
            });

            // UPDATE TIME TABLE - not meant to return anything
            $.getJSON("updateActivityTimeTable.php", data, function(newResult) {
                alert(newResult);
            });

            // UPDATE UI BASED ON ACTIVITIES COMPLETED
            var spanName = className + "Num";

            $.getJSON("getActivityNum.php", data, function(newResult) {
                    $.each(result, function(key, val)) {
                        $("#"+spanName).html(val);
                        numComplete = val;
                    }});


            // figure out how many activities means its
            //  complete
            toComplete = complete($(this).attr("class"));

            changeColor($(this));
        }*/ 
    }); 

})

Answer 1

You have syntax error in each loop in the bond click event. The error is here : $.each(result, function (key, val)) { it should be,

$.getJSON("time.php", function(result) {
        $.each(result, function(key, val) {
            recentlyCompleted = val;
        });
    });

Answer 2

Fixed it due to misplaced parentheses near "each" statements. Thanks!