Question

从ajax调用后，将加载调用Fancybox函数的<a>标记。点击链接后，模态窗口不会显示。我尝试以静态方式使用<a>并且它可以工作，但不是通过动态代码。我还注意到，在浏览器中查看“Source”时，标签不存在。有帮助吗？谢谢！

这个代码将在从服务器端调用ajax后动态创建（我正在使用java）。我使用class作为jquery函数的链接，因为标签可以是具有相同类名的几个实例：

 <a class="link" href="#task" title="Details">View details</a>
    <div style="display: none;">
        <div id="task" style="width:400px;height:100px;overflow:auto;">
            some data from the server.
        </div>
    </div>

这是我的fancybox功能：

$("a.link").fancybox({
        'titlePosition' : 'inside',
        'transitionIn'  : 'none',
        'transitionOut' : 'none'
});

Answer 1

fancyBox从v2.0开始使用“live”来绑定click事件，因此它也适用于动态创建的元素。

Answer 2

在文档准备好后动态向DOM添加新元素时，fancybox无法“绑定”这些新元素，而是可以尝试使用delegate（）侦听这些元素上的事件，然后动态创建这样的信息框：

<html>
<head>
    <style>
    p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
    p.over { background: #ccc; }
    span { color:red; }
    </style>

    <link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" />

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://pcapr.googlecode.com/svn-history/r75/trunk/script/fancybox/jquery.fancybox-1.3.4.js"></script>

    <script type="text/javascript">

        $("body").delegate("#example7", "click", function(event) {
            event.preventDefault();
            $.fancybox({
                //'modal': false,
                //'padding'        : 0,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'fade',
                'titlePosition': 'inside',
                'autoDimensions': false,
                'title': this.title,
                'width': 400,
                'height': 400,
                'href': this.href,
                'margin': 5,
                'showCloseButton': true,
                'autoScale':true,
                'hideOnOverlayClick':true,
                'hideOnContentClick':true,
                'overlayShow': true
                //'type': 'iframe'
            }

            );

        });
    </script>
</head>
<body>
  <p><a title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="http://3.bp.blogspot.com/_167-sL7Cczk/TBiMz6jdtYI/AAAAAAAABcs/JxqC2vCIFa4/s1600/cute-puppy-dog-wallpapers.jpg" id="example7">hola, click me for fancybox</a></p>

    <script type="text/javascript">


    </script>
</body>
</html>

至少它对我有用！祝你好运！

Answer 3

在这种情况下，您可能必须使用livequery

Answer 4

使用jQuery（）。live（'mouseenter'）允许fancybox附加到动态内容。

jQuery("a.fancybox").live('mouseenter', function(e){
    e.preventDefault();
    jQuery("a.fancybox").fancybox();
});

确保不要使用jQuery(this).fancybox();，否则它只会查找“mouseenter”内的项目，这些项目很可能只会是一个图像并打破画廊。

在动态内容中触发Fancybox

4 个答案: