Fancybox递归导致堆栈溢出

Question

It seems that when I add an afterClose callback to my fancybox I'm getting this error:

Uncaught RangeError: Maximum call stack size exceeded

This is the code I am using:

$("a.termsLink").fancybox({
    type            : 'iframe', 
    fitToView       : false,
    width           : 450,
    height          : 600,
    afterClose  : function(){
        $('#regForm').click();
    }
});

What is supposed to happen is when the termsLink box closes, the regForm is supposed to open. I've expiremented with differnt callbacks, but the issue that I am running into seems to be unaffected by this.

The solution appears to be as follows:

    afterClose      : function(){
        setTimeout(function(){$('#regForm').click();}, 1);
    }

However that feels like a very hacky method to me, the issue seems to be that the fancybox code trys to call the new box while the animation for the other box is still running, which causes this issue. Is this a documented issue with FancyBox? Or is this a function of the way jQuery animation event work? Is there a more elegant solution to this issue?

Answer 1

If you're using Twitter Bootstrap < 2.3.1, it's known to cause this exact issue (I just experienced it, and upgrading bootstrap solved the problem)

More details here: https://github.com/fancyapps/fancyBox/issues/519

Answer 2

Are you sure the problem is related to the click function? I found the same problem including, by mistake, two jQuery versions (jquery-1.2.6.pack.js and jquery-1.4.4.min.js) Removing the last one solved the problem. I checked this because of this topic loading jquery twice causes an error? . You could try to check it.

Answer 3

Try

$("a.termsLink").fancybox({
    type            : 'iframe', 
    fitToView       : false,
    width           : 450,
    height          : 600,
    afterClose  : function(){
        $('#regForm').focus();
    }
});

although what you have should work you're right. Unsure but check the script doesn't close all fancybox's open. if the #regForm is being opened into a fancybox hence why you'd need the timeout.

Answer 4

Looking into the fancybox script they use this function

    function _cleanup() {
        overlay.fadeOut('fast');

        title.empty().hide();
        wrap.hide();

        $.event.trigger('fancybox-cleanup');

        content.empty();

        currentOpts.onClosed(currentArray, currentIndex, currentOpts);

        currentArray = selectedOpts = [];
        currentIndex = selectedIndex = 0;
        currentOpts = selectedOpts  = {};

        busy = false;
    }

This basically confirms what I was saying before. All the instances of fancybox are cleared after this function is run. So even though you've got one opening straight after it's being cleared before really being shown. The solution you've come up with seems to be the better solution unless you want to fiddle with the fancybox script yourself :)