如何在fancyBox弹出窗口内调用脚本而不会阻塞浏览器？

Question

看下表......

点击任意一行打开一个非模态的fancyBox（v2.1.4），其中包含该行的详细信息......

像这样调用fancyBox ......

function showBox( url, title, modal ){
    $.fancybox({
        type: 'ajax',
        href: url,
        title: title,
        padding: 20,
        modal: modal,
        afterShow: function(){
            pageInit();
        }
    });
    return false;
}

到目前为止一切顺利，它运作良好。除了fancyBox变得越来越无响应。初始弹出窗口在半秒内响应。在5个弹出窗口之后，响应延迟了大约一秒钟。 10次​​点击= 2秒。 20 = 5秒。问题不在于fancyBox，而是我的pageInit()函数，它看起来像这样：

function pageInit() {
    // autosize textareas
    $('.autoresize').autosize();
    // buttonsets
    $('.buttonset').buttonset();
    // checkbox + radio
    $('input:checkbox, input:radio').not( $('div.buttonset input') ).uniform();
    // dates
    $('.datepicker').datepicker({
        dateFormat:'yy-mm-dd',
        changeMonth: true,
        changeYear: true
        });
    // hoverable tables
    $('table.hoverable').on( 'click', 'tbody tr', function(e){
        var $url = $(this).data('url');
        var $title = $(this).data('title');
        var $modal = $(this).data('modal') ? true : false;
        if (typeof $title !== 'undefined') { // has title, call showbox()
            showBox( $url, $title, $modal );
        } else if (typeof $url !== 'undefined') { // url but no title, load page
            if (e.metaKey) window.open( $url ); // command click .. open in new tab
            else window.location.href = $url; // open in current window
        }
        return false;
    });
    $('a, input:checkbox, input:radio').click( function(e){
        e.stopPropagation();
    }); // prevent action of hoverable tr click!

    // zebra striping
    $('table.zebra > tbody > tr:visible:even').css('background', 'rgba(255, 255, 255, 0.1)');
    $('table.zebra > tbody > tr:visible:odd').css('background', 'rgba(255, 255, 255, 0.05)');
}

我正在使用许多UI增强功能和输入格式设置工具，例如自动调整大小，统一，jQuery UI的按钮集和 datepicker ，以及一些自制功能。在弹出窗口中使用这些可以提高可用性和连续性。所以我在父文档中调用pageInit()一次，然后再在每个fancyBox弹出窗口的afterShow:中调用。

显然，反复调用这些元素是有问题的。有一些DOM和脚本正在进行，这让事情变得有些混乱。在没有重复初始化的情况下使用调用jQuery弹出窗口的正确方法是什么？

Answer 1

你能不能这样做：

modalInit(elem){
  $(elem).find('.autoresize').autosize(); 
 ....
}
function showBox( url, title, modal ){
  $.fancybox({
    ....
    modal: modal,
    afterShow: function(){
        modalInit($(modal)); // or whatever you html object is
    }
  });
 return false;
}