Question

I am getting the error message too much recursion. Why?

The following code is supposed to expand/collapse the table rows upon clicking on the image. If the image does not exist the there would be a div upon clicking on which the last rows will expand/collapse

$(document).ready(function() {
    $(".ui-dialog-titlebar").hide(); 
    //$(".lvlcollapse .level4").hide();
    $("tr.lvlcollapse").click(function() {
        //alert($(this).find("img").attr("src"));
        if ($(this).find("img").attr("src") != undefined) {
            var tnow = $.now();
            var allClass = $(this).attr('class');
            var level = getLevel($(this));
            var state = getClass($(this), '^clicked\\d+$');
            if (state == undefined) {
                state = "closing";
                $(this).addClass("clicked" + tnow);
            }
            else {
                $(this).removeClass(state);
                tnow = state.substr(6);
            }
            switchImage($(this));
            $(this).nextAll(".lvlcollapse").each(function() {
                var sublvl = getLevel($(this));
                var subtnow = 0;
                var substate = getClass($(this), '^closed\\d+$');
                if (substate != undefined) subtnow = substate.substr(5);
                if (sublvl > level) {
                    if (state == "closing" && subtnow == 0) {
                        $(this).addClass("closed" + tnow);
                        $(this).toggle();
                    }
                    else if (subtnow == tnow) {
                        $(this).removeClass(substate);
                        $(this).toggle();
                    }
                }
                else {
                    return false;
                }
            });

        } else {
            //alert('No Image ');
            $(".button").click(function(event) {
                //var $this2 = $(this);
                var allLevel4 = $(this).next(".lvlcollapse.level4");
                $($(this)).toggle('fast', function() {
                    if (allLevel4.is(":visible")) {
                        $(this).html("Show Attempts");
                        alert('hello2');
                        return false;
                    } else {
                        $(this).html("Hide Attempts");
                        alert('hello3');
                        return false;
                    }

                }) event.preventDefault();
            }).trigger("click");
        }
    });
    $(".lvlcollapse.level2").filter(function() {
        return $(this).next(".lvlcollapse.level3").is(":visible");
    }).trigger("click");
    //$(".button").filter(function() { return $(this).next(".lvlcollapse.level4").is(":visible"); }).hide();
});​

Answer 1

One thing that looks funny is that you’re adding a click handler to the button within the click handler for tr.lvlcollapse. That will create a new handler everytime you click on it and it will trigger all the previous handlers when you call trigger.click()

Since the click event bubbles, it will also trigger the click handler for all the parents. If the button is inside tr.lvlcollapse, that could be your problem.

Two things you need to do:

• Don’t set handlers from within handlers unless you really know what you are doing and you have a plan to unbind the handlers, or at the very least, remove existing binding before binding. Note that this is less common, you typically do not add handlers from within handlers.

• Call event.stopPropagation() if you don’t want ancestor nodes to handle the click