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

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

在用户使用我提供的按钮更改月份或年份之前，我一直在使用这些功能。之后，fancybox似乎不适用于新元素

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

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

这与jQueryUI的日期选择器一起使用

我尝试用以下代码复制此代码：

$('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广泛地分配给这个庄园中的多个元素

---

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

如果您使用的是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，它不支持动态添加的元素，那么请查看进一步的解释、解决方法和演示

更新（2012年11月15日）：在您的特定情况下（使用fancybox v1.3.4），我们需要重新定义

鼠标悬停

事件的委派方式，以便此代码：

$(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

---

。。。我们应该做到这一点

谢谢你@jfk。我还没有说服我的雇主去申请2.0的许可证，但与另一个问题的链接似乎会起作用。如果没有，那么我一定会回来发布，否则它确实有效。您的解决方案是100%正确的，在JSFIDLE中，在我用您提供的确切代码制作的测试页面中（将include添加到fancybox中），它有效。对于我的日历的实际需要，它不起作用，但我相信这是因为错误在其他地方。