Question

我的网站上有一个日历，它使用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广泛分配给这个庄园中的多个元素？

如果有人有任何想法，我们将不胜感激。

Answer 1

如果您使用的是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

......应该做的伎俩。的 See FIDDLE

如何将fancybox应用于动态异步内容

1 个答案: