javascript - jquery 表行抛出过多递归错误消息

Question

我收到错误消息太多递归。为什么？

following code is应该在单击图像时展开/折叠表格行。如果图像不存在，则单击后会出现一个 div，最后几行将展开/折叠

$(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

一件看起来很有趣的事情是，您在 tr.lvlcollapse 的点击处理程序中向按钮添加了一个点击处理程序。每次您单击它时，都会创建一个新的处理程序，并且当您调用 trigger.click()

时，它将触发所有先前的处理程序

由于点击事件冒泡，它也会触发所有父级的点击处理程序。如果按钮位于 tr.lvlcollapse 内部，则可能是您的问题。

您需要做两件事:

• 不要在处理程序内部设置处理程序，除非您确实知道自己在做什么，并且计划解除处理程序的绑定(bind)，或者至少在绑定(bind)之前删除现有的绑定(bind)。请注意，这种情况不太常见，您通常不会从处理程序内添加处理程序。

• 如果您不希望祖先节点处理点击，请调用 event.stopPropagation()