0

次の表を見てください...

ここに画像の説明を入力

任意の行をクリックすると、その行の詳細を含む非モーダル ファンシー ボックス (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 がますます応答しなくなることを除いて。最初のポップアップは 0.5 秒以内に応答します。ポップアップが 5 回表示されると、応答が約 1 秒遅れます。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)');
}

autosize、uniform、jQuery UI のbuttonsetとdatepicker、いくつかの自作関数など、多くの UI 拡張機能と入力書式設定ツールを使用しています。これらをポップアップに含めると、使いやすさと継続性が向上します。pageInit()そのため、親ドキュメントで 1 回呼び出してafterShow:から、それぞれの fancyBox ポップアップでもう一度呼び出します。

明らかに、これらの要素を繰り返し呼び出すことには問題があります。進行中の DOM とスクリプトのレイヤーがあり、少し混乱しています。何度も何度も再初期化せずに、ポップアップに call 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 に答える