Jquery fancybox 问题答案

【问题标题】：Jquery fancybox issueJquery fancybox 问题
【发布时间】：2012-10-02 12:13:50
【问题描述】：

点击动态生成的标签时，我需要加载 jquery 花式框。当我第一次单击链接时，不会出现花哨的框，当它在第二次单击时加载。

你能给我一个解决方案吗？这是我的代码，

$(document).ready(function()
    {   
        $(".app a").live('click',function(e){

        e.preventDefault();
        var contentId = $(this).attr('id');

            $("#"+contentId).fancybox({            
                'titleShow'     : false,
                'padding'       : 0,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic',
                'autoDimensions':false, 
                'width'     :380, 
                'height'        :500,
                'showCloseButton' : true,
                'hideOnOverlayClick' : false            
            });

        });
    });


<div class="app"> 
  <a href="#device_detection" id="apps_<?= $regUsers->id; ?>"> click here</a>
</div>

【问题讨论】：

这段代码看起来都很好，也许你的 Javascript 包含的顺序有问题 - 你可以发布你的 html 的其余部分吗？或者将代码放入 jsFiddle 来说明问题？
已经包含了很多 Jquery 组件，例如 jquery.tinymce.js、jquery.flot.js、query.validate.js，因此很难放置整个代码。但是当锚标记的 id 是静态的时它可以工作。
第一次点击是否触发了点击事件？使用console.log('yes'); 找出答案。 if not => 与fancybox无关。

标签： jquery fancybox

【解决方案1】：

关注this post
在第一次点击时你只是在初始化fancybox，你需要通过这样做来触发fancybox的事件监听器

$("#"+contentId).fancybox({            
    'titleShow'     : false,
    ...
}).trigger("click");

【讨论】：