0

我的网站上有一个日历，它使用 ajax 在不同的月份和年份之间切换。日历显示相应日期的事件标题，当用户将鼠标悬停在标题上时，应弹出一个灯箱，提供更多信息。

我已经完成了这一切，直到用户使用我提供的按钮更改月份或年份。在那之后，fancybox 似乎没有应用于新元素。

我知道这是因为元素是在最初的 fancybox 定义之后添加到 dom 的，并且已经使用类似于以下的代码来处理它：

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

这与 jQuery UI 的 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

如果您使用的是 fancybox v2.x，那么您不需要该.live()方法，因为 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

...应该做的伎俩。见小提琴

于 2012-11-13T19:22:40.127 回答