Question

嗨，我有一个有效的网站。在一个效果中，当用户越过div时，我追加到该div的位置绝对是另一个div。在新div内部我插入一个图像，如果用户点击它我想启动fancybox。我花了很多时间使用fancybox但从未使用动态创建的元素。这是代码：

$(document).ready(function(){
    $(".elenco a").stop().mouseover(function(){
        $(".elenco a").css('color','#000');
        $(this).css('color','#fff');
        var id = $(this).attr('id');
         if ($('#gallery').length!=0){
             var image= $('#gallery').find('#thumb_img');
             image.attr('src','img/gallery/thumb/th_'+id+'.jpg');
         }else{          
            $('.elencoGallery').stop().append(function() {

                return '<div id="gallery"  style="position:absolute; top:0; left:300px; z-index:1000;overflow:hidden; width:0px; height:154px; background:#c7c2c2;"><a href="img/gallery/thumb/thumb.jpg" class="fancy"><img src="img/gallery/thumb/thumb.jpg" alt="living arredamenti" style="margin-top:9px; margin-left:19px;" id="thumb_img"/></a></div>';
            });

            $('#gallery').stop().animate({
                width:'200px'

              }, 1000, function() {
                // Animation complete.
            });
         }
    });

    $('.elencoGallery').stop().mouseleave(function(){
        $('#gallery').stop().animate({
            width:'0px'
          }, 1000, function() {
            $('#gallery').remove();
        });
    });

});
</script>

HTML：

<div class="elencoGallery">
<div class="elenco" style="padding-top:18px;" >
    <p style="padding-left:10px;" id="cucine" >test1</p>
</div>
<div class="elenco" style="padding-top:18px;" >
    <p style="padding-left:10px;" id="cucine2" >test</p>
</div>
</div>

我已经简化了html，一切正常，只有fancybox在我追加时不起作用。不是fancybox的问题，因为如果我把一个简单的链接没有动态创建fancybox工作正常1 图像在正确的位置，如果我复制这个外部的附加内部div不动态的作品!!为什么？

<a href="img/gallery/thumb/thumb.jpg" class="fancy"><img src="img/gallery/thumb/thumb.jpg" alt="living arredamenti" style="margin-top:9px; margin-left:19px;" id="thumb_img"/></a>

对fancybox的调用：

<script type="text/javascript">

    $(document).ready(function(){   
        $("a.fancy").fancybox({
            'transitionIn'  :   'fade',
            'transitionOut' :   'fade',
            'speedIn'       :   600, 
            'speedOut'      :   200, 
            'overlayShow'   :   true,
            'overlayOpacity':   0.8,
            'overlayColor'  :   '#000'
        }); 
    });
    </script>

为什么我的fancybox在附加中创建运行时不起作用？

Answer 1

代码中的某个地方（您没有显示），您将初次调用fancybox方法。插入新的动态元素后，您必须再次调用fancybox方法刷新fancybox。

大多数插件为方法提供了类似'refresh'的参数，其他一些插件则要求您重复完整的初始方法调用。一些插件提供.init（）方法。你必须深入了解fancybox的文档才能找到答案。

Jquery在fancybox中动态添加图像

1 个答案: