0

看下表...

在此处输入图像描述

单击任何行会打开一个包含该行详细信息的非模态 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 增强功能和输入格式化工具，例如autosize、uniform、jQuery UI 的buttonset和datepicker，以及一些自制函数。在弹出窗口中包含这些可以提高可用性和连续性。所以我pageInit()在父文档中调用一次，然后在afterShow:每个 fancyBox 弹出窗口中再次调用。

显然，重复调用这些元素是有问题的。有一层层的 DOM 和脚本在运行，这让事情变得有点混乱。在不一遍又一遍地重新初始化事物的情况下，将调用 jQuery 用于弹出窗口的正确方法是什么？

4

1 回答 1

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;
}
于 2013-01-29T12:23:50.613 回答