在动态内容中触发 Fancybox

发布于 2024-10-12 21:44:36 字数 767 浏览 1 评论 0原文

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

这段代码将在从服务器端调用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'
});

原文

My <a> tag which has the call for the Fancybox function will load after calling from ajax. Upon clicking on the link, the modal window wont show up. I tried using the <a> in a static way and it works, but not through dynamic code. I also noticed that upon viewing "Source" in my ie browser, the tag is not present. Any help? Thanks!!

this code will be created dynamically after calling ajax from the server side (I'm using java). Im using class as my link to the jquery function because the tags can be several instances with the same class name:

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

This is my fancybox function:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

隐诗 2024-10-19 21:44:36

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

回复收藏 0 原文

画中仙 2024-10-19 21:44:36

当文档准备好后动态添加新元素到 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>

：它对我有用！祝你好运！

When you dynamic add new elements to DOM after document is ready, fancybox is unable to "bind" those new elements, instead you can try to listen for events on those elements with delegate() and then dynamically create a infobox like this:

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

At least it worked for me! good luck!

回复收藏 0 原文

故乡的云 2024-10-19 21:44:36

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

回复收藏 0 原文

破晓 2024-10-19 21:44:36

使用 jQuery().live('mouseenter') 允许 fancybox 附加到动态内容。

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

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

Use jQuery().live('mouseenter') to allow fancybox to attach to dynamic content.

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

Make sure NOT to use jQuery(this).fancybox(); or else it will only look for the items inside "mouseenter", which will more than likely only be one image and break galleries.

回复收藏 0 原文

~没有更多了~