带有新创建元素的灯箱

Question

我有一个灯箱插件（fancyboy），我正在我的网站上运行。对于几乎每个图像，此库都例外地工作。

但是，我的代码中有一个片段（来自第 3 方库）创建了一个图像库（adgallery） - 取自 TER（Typo3 存储库）

    var context = this;
    var image = this.images[index];
    var img_container = $(document.createElement('div')).addClass('ad-image');
    var img = $(new Image()).attr('src', image.image);
    if(image.link) {
      var link = $('<a href="'+ image.link +'" class="lightbox"></a>');
      link.append(img);
      img_container.append(link);
    } else {
      img_container.append(img);
    }

如您所见，我已经在链接中添加了"class="lightbox"属性。dom 看起来不错：

<a href="/uploads/tx_adgallery/apfel-prasi43.jpg" class="lightbox">
    <img src="/typo3temp/_processed_/csm_apfel-prasi43_d89a571bb8.jpg" width="400" height="300">
</a>

但是，不会触发灯箱事件。相反，它只是在同一选项卡中打开链接。

<script type="text/javascript">
    $(document).ready(function()
        {
            $('.ad-gallery').adGallery({
                width:'###WIDTH###',
                height:'###HEIGHT###',
                effect:'####',
                slideshow:{
                    enable:true,
                    autostart:true,
                    speed:3000,
                    start_label:'Lecture',
                    stop_label:'Pause'
                }
            });
     });
</script>

与上面相同，HTML-Dom是正确的。我已经尝试使用$(window).load()，但这并没有解决问题。

但是，当我将灯箱类添加到缩略图时，它正在工作。我错过了什么吗？

谢谢

Answer 1

问题隐藏是动态内容（每次更改时都会重新渲染大图像，因此会错过所有事件）。你可以试试这个技巧：

$('.ad-gallery').on('mousedown touchstart', '.ad-image a', function(){
    $(this).fancybox();
});

这将在用户点击之前发生的每个mousedown和touchstart上激活/重新激活 fancybox 功能。