动态链接和jQuery Lightbox问题：在灯箱中加载图片……完全难倒！

我有一个动态创建照片库链接的function。 当单击缩略图时，该function还会生成较大的图像作为div的背景图像。 我想要做的是有第三个事件，如果用户点击div中的放大图像，jQuery Fancybox会加载div中显示的更大版本的图像。 问题是我正在使用的锚标签的链接是动态创建的，我知道当DOM准备好时Fancybox会解析HTML …不幸的是我的函数通过为完整大小的图像附加锚标记来更改DOM 。 我需要的帮助是使用Fancybox的选项来指定插件的href属性。 对不起，这太啰嗦……这是代码。

jQuery的：

function gallery(picid, picnum){ var ext = 'jpg'; var fullSize = 'imgs/'+picid+'_full.'+ext; $('#photolarge').css("background", 'url(imgs/'+picid+'_large.'+ext+') no-repeat'); $('#photolarge a').attr( { href: fullSize //rel: 'lightbox', } ); $("#lightboxlink").click(function(){ $('#lightboxlink').fancybox({ 'autoDimensions' : false, 'width' : 'auto', 'height' : 'auto', 'href' : fullSize }); }); return false; 

}

HTML代码段

后续CSS：

 #photolarge { width: 590px; height: 400px; margin-left: 7px; border: 2px solid; background: none;} #phototable { width: 590px; height: 300px; border: 2px solid; margin: 10px 0 0 7px;} #phototable img { cursor: pointer;} #phototable ul { list-style: none; display: inline;} #phototable li { padding-left: 10px;} #lightboxlink { display: block; height: 100%; width: 100%;} 

任何帮助将不胜感激！！！

Answer 1

您可以使用.live()作为事件处理程序，使用.triggerHandler()立即打开灯箱，如下所示：

 $("#lightboxlink").live('click', function(e){ $(this).filter(':not(.fb)').fancybox({ 'autoDimensions' : false, 'width' : 'auto', 'height' : 'auto', 'href' : fullSize }).addClass('fb'); $(this).triggerHandler('click'); e.preventDefault(); //prevent opening in new window }); 

这会在链接上运行.fancybox() ，但.fancybox()是我们还没有运行它，我们正在跟踪.fb类添加。 无论是新绑定还是新绑定，我们都需要触发click处理程序，这是fancybox为了打开而监听的。