A potentially faulty "too much recursion" error in jQuery 1.4.2

Question

Hi, I think this may be a "false positive", but I could be wrong. I have the following script and it's crashing on one line with a "too much recursion" error:

var Win, Doc;
var Content, Blackout;

$(function () {
    Win = $(window);
    Doc = $(document);

    Content = $("#Content");
    Blackout = $("#Blackout");

    Content.bind("resize", function () {
        Content.css({
            minHeight: ((Win.height() - Content.position().top) - 20)
        })

        Blackout.trigger("resize"); // <- this is where the error appears
                                    //    to be triggering
    }).trigger("resize");

    Blackout.css({
        opacity: .2
    }).bind("resize", function () {
        Blackout.css({
            height: Content.innerHeight(),
            width: Content.innerWidth()
        });
    }).bind("click", function () {
        $("div.Wizard:visible").trigger("hide");
    }).trigger("resize");

    Win.bind("resize", function () {
        Content.trigger("resize");
    });
});

From reading the other topics on this, I can only assume that once Blackout.trigger("resize") is called, it will query Content via the innerHeight() function which Firefox/Firebug could be interpreting as recursion and thus crashing it. I could be wrong, but that's what I've come up with.

Either way, I would appreciate some help on this.

Answer 1

If #Blackout is inside #Content (I'm guessing by the named here) then then event is bubbling up and causing the resize handler you're in to fire again.

Instead of .trigger() invoke it in a way that doesn't bubble using .triggerHandler(), like this:

Blackout.triggerHandler("resize"); 

This way that resize event won't trigger the resize handler on #Content...which causes your loop.