0

私のウェブサイトには、ajaxを使用して異なる月と年を切り替えるカレンダーがあります。カレンダーには、それぞれの日のイベントタイトルが表示され、ユーザーがタイトルにマウスを合わせると、ライトボックスがポップアップ表示され、詳細情報が表示されます。

ユーザーが提供したボタンで月または年を変更するまで、これはすべて機能しています。その後、fancyboxは新しい要素に適用されていないようです。

これは、最初のfancybox定義の後に要素がdomに追加され、次のようなコードで処理されたためです。

    $('.date').live('focusin', function() {
    var $this = $(this);
    if(!$this.is(':data(datepicker)')) {
        $this.datepicker();
    }
});

これは、jQueryUIのdatepickerと組み合わせて使用​​されました。

私はこれでこのコードを複製しようとしました：

$('div#calendar').live('mouseover', function() {
            $("a.event_link").fancybox({
                'width'             : 610,
                'height'            : 347,
                'autoScale'         : false,
                'overlayOpacity'    : 0.8,
                'overlayColor'      : '#000',
                'type'              : 'iframe',
                'padding'           : '5px',
                'margin'            : '5px',
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });

            $('a.event_link').live('mouseover', function() {
                $(this).trigger('click');
            });
        });

このコードでは、ページが最初に読み込まれたときに引き続き正しく機能しますが、ユーザーが月または年を変更すると、何も起こりません。

これを関数内に配置したり、終了直前にsetTimeout（）を追加したりするなど、これの多くのバリエーションを試しましたが、それでも同じ動作が得られます。

関数型コードと非関数型コードで異なるのは$thisの使用だけですが、このマナーの複数の要素にfancyboxを幅広く割り当てることができない可能性はありますか？

何かアイデアがありましたら、よろしくお願いします。

4

1 に答える 1

2

.live()fancybox v2.xを使用している場合、fancybox v2.xは既存の要素と動的に追加された（ajax）要素の両方をサポートしているため、メソッドは必要ありません。セレクターをfancyboxにバインドするだけです。

   $(document).ready(function(){
       $("a.event_link").fancybox({
            'width'             : 610,
            'height'            : 347,
            'autoScale'         : false,
            'overlayOpacity'    : 0.8,
            'overlayColor'      : '#000',
            'type'              : 'iframe',
            'padding'           : '5px',
            'margin'            : '5px',
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
        });
   });

一方、動的に追加された要素をサポートしていないfancybox v1.3.4を使用している場合は、https：//stackoverflow.com/a/9084293/1055987で詳細な説明、回避策、デモを確認してください。

更新（2012年11月15日）：特定の状況（fancybox v1.3.4を使用）では、イベントの委任方法を再定義する必要があるmouseoverため、このコード：

$(document).ready(function() {
    // open fancybox on mouseover
    $("div#cal-wrapper").on("mouseover", "a.event_link", function() {
        $("a.event_link").fancybox({
          // API options here
        }).trigger("click");
    }); // on
});​ // ready

...トリックを行う必要があります。FIDDLEを参照してください

于 2012-11-13T19:22:40.127 に答える